>  기사  >  웹 프론트엔드  >  내 웹 페이지에 내 .ttf 글꼴이 표시되지 않는 이유는 무엇입니까?

내 웹 페이지에 내 .ttf 글꼴이 표시되지 않는 이유는 무엇입니까?

DDD
DDD원래의
2024-11-05 12:14:02302검색

Why is My .ttf Font Not Showing Up in My Web Page?

CSS를 사용하여 .ttf 글꼴 포함

.ttf 파일을 사용하여 웹 페이지에 전역 글꼴을 통합하려고 할 때 다음과 같은 문제가 발생할 수 있습니다. 글꼴이 변경되지 않으면 문제가 발생합니다. 가능한 원인을 해결해 보겠습니다.

코드 문제 해결

제공된 코드에는 브라우저 간 호환성을 위한 중요한 요소가 부족합니다. .ttf 파일 외에도 다양한 브라우저에 대한 대체 형식을 제공해야 합니다.

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}</code>

자동화 도구

이러한 여러 글꼴을 생성하는 프로세스를 단순화하려면 형식의 경우 Font Squirrel 또는 Transfonter와 같은 도구를 사용할 수 있습니다.

최신 브라우저 지원

최신 브라우저의 경우 보다 간결한 접근 방식을 선택할 수 있습니다.

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  </code>

추가 리소스

  • https://css-tricks.com/snippets/css/using-font-face/
  • https: //caniuse.com/#feat=fontface (브라우저 지원 정보용)

위 내용은 내 웹 페이지에 내 .ttf 글꼴이 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.