CSS3를 사용하면 사용자 정의 글꼴을 사용할 수 있습니다.
멋진 텍스트 효과도 있습니다
사용자 정의 글꼴을 사용하려면 @글꼴이 필요합니다-얼굴 규칙
물론 먼저 사용자 정의 텍스트 파일이 필요합니다
<p class="demo">Payen S.Tsung</p>
굵은 형식의 글꼴 파일도 있는 경우
다음을 수행할 수 있습니다. 이렇게 사용하세요
@font-face { font-family: myDIYfont; /*自定义字体名*/ src: url('Ginga.ttf'); /*字体文件*/}.demo { font-family: myDIYfont;}
@font-face 다양한 브라우저에서 호환성 문제가 있습니다
src속성< 뒤에 format 형식을 이와 같이 추가하면 됩니다. 🎜> src: url('Ginga.ttf') format('truetype');
브라우저 호환성:
Android, iOS 4.2+*/
두 가지
@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;}
사실 둘은 동일합니다.
박스 그림자가 아닌 텍스트의 그림자일 뿐입니다
또한 매우 성능 집약적이므로 아껴서 사용해야 합니다
속성 값에는 수직 그림자 거리, 흐림 반경(선택 사항), 색상(선택 사항)이 있습니다.
여러 그림자를 정의할 수도 있습니다
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!