CSS3 글꼴 및 텍스트 효과를 위한 샘플 코드 공유

黄舟
풀어 주다: 2017-05-21 16:31:21
원래의
1908명이 탐색했습니다.

CSS3를 사용하면 사용자 정의 글꼴을 사용할 수 있습니다.

멋진 텍스트 효과도 있습니다

사용자 정의 글꼴

사용자 정의 글꼴을 사용하려면 @글꼴이 필요합니다-얼굴 규칙
물론 먼저 사용자 정의 텍스트 파일이 필요합니다

<p class="demo">Payen S.Tsung</p>
로그인 후 복사
rrree

굵은 형식의 글꼴 파일도 있는 경우
다음을 수행할 수 있습니다. 이렇게 사용하세요

@font-face {    font-family: myDIYfont; /*自定义字体名*/
    src: url(&#39;Ginga.ttf&#39;); /*字体文件*/}.demo {    font-family: myDIYfont;}
로그인 후 복사

@font-face 다양한 브라우저에서 호환성 문제가 있습니다
src속성< 뒤에 format 형식을 이와 같이 추가하면 됩니다. 🎜> src: url(&#39;Ginga.ttf&#39;) format(&#39;truetype&#39;);브라우저 호환성:

  • url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

  • url('ont.woff') 형식('woff'), /*

    chrome, firefox */

  • url('font.ttf') 형식('truetype'), /* 크롬, 파이어폭스, 오페라, 사파리,

    Android, iOS 4.2+*/

  • url('font.svg#fontname') format('svg'); /* iOS 4.1- */

텍스트 효과

CSS3는 많은 텍스트를 추가합니다. 효과 그러나 일반적으로 사용되지는 않습니다

두 가지

텍스트 경계 줄 바꾸기

word-wrap
@font-face {    font-family: myDIYfont;    src: url(&#39;Ginga_bold.ttf&#39;);    font-weight: bold;}.demo {    font-family: myDIYfont;}
로그인 후 복사
<p class="demo">honorificabilitudinitatibus</p>
로그인 후 복사

브라우저는 이렇게 생각합니다. 는 단어이므로 줄 바꿈이 없습니다

중국어, 일본어, 한국어가 아닌 모든 텍스트에 대한 줄 바꿈 규칙의 경우 단어 줄 바꿈을 사용하여 줄 바꿈을 강제할 수 있습니다

.demo {    width: 100px;    height: 100px;    border: 1px solid black;}
로그인 후 복사

속성 값도 일반(기본값)을 가집니다. 브라우저의 기본 규칙을 나타내고, keep-all은 줄 바꿈에 대한 공백과 하이픈을 나타냅니다.

사실 둘은 동일합니다.

텍스트 그림자text-shadow

이 속성은 box-shadow와 매우 유사하지만 완전히 동일하지는 않습니다

박스 그림자가 아닌 텍스트의 그림자일 뿐입니다
또한 매우 성능 집약적이므로 아껴서 사용해야 합니다
속성 값에는 수직 그림자 거리, 흐림 반경(선택 사항), 색상(선택 사항)이 있습니다.
여러 그림자를 정의할 수도 있습니다
box-shadow와의 차이점은 그림자 크기와 투영 모드가 없다는 점입니다

.demo {    width: 100px;    height: 100px;    border: 1px solid black;    word-break: keep-all;}
로그인 후 복사

이 속성을 사용하면 텍스트를 더 멋져 보이게 만들 수 있습니다

.demo {    width: 100px;    height: 100px;    border: 1px solid black;    word-break: break-all;    text-shadow: 10px 10px 2px red,                 20px 20px 3px blue;    
}
로그인 후 복사
<p class="demo">this is a text</p>
로그인 후 복사

그럼요~

위 내용은 CSS3 글꼴 및 텍스트 효과를 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!