내 웹 사이트에 내 .ttf 글꼴이 제대로 표시되지 않는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-11-05 11:26:02

원래의

815명이 탐색했습니다.

Why Does My .ttf Font Not Display Properly in My Website?

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>

로그인 후 복사

추가 자료: