내 웹 사이트에 내 .ttf 글꼴이 제대로 표시되지 않는 이유는 무엇입니까?

CSS를 통해 .ttf 글꼴 통합

문제:

구현 시도 중 웹 페이지의 전역 글꼴인 .ttf 파일이 CSS에 포함되었습니다. 그러나 글꼴이 의도한 대로 표시되지 않습니다.

코드 조각:

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, ... {
    font-family: oswald;
}</code>

근본 원인:

In 웹 글꼴 구현에서는 .ttf 파일만으로는 브라우저 간 호환성이 충분하지 않습니다.

해결 방법:

다른 브라우저 간 호환성을 지원하려면 여러 글꼴의 조합 형식을 권장합니다:

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

대체 접근 방식:

향상된 브라우저 지원을 위해 최신 브라우저에서는 .woff 글꼴 형식 선택을 권장합니다.

<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>

추가 자료:

• CSS 요령: @font-face 사용: https://css-tricks.com/snippets/css/using-font-face/
• 글꼴을 사용할 수 있나요? https://caniuse.com/?feat=fontface

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