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

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

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

사용자 정의 글꼴

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

<p class="demo">Payen S.Tsung</p>

rrree

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

@font-face {    font-family: myDIYfont; /*自定义字体名*/
    src: url('Ginga.ttf'); /*字体文件*/}.demo {    font-family: myDIYfont;}

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

• 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('Ginga_bold.ttf');    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!