내 사용자 정의 트루타입 글꼴(.ttf)이 CSS에서 작동하지 않는 이유는 무엇입니까?

CSS와 함께 사용자 정의 글꼴 사용: 종합 가이드

고유한 글꼴로 웹페이지를 스타일링하면 사용자 경험을 향상시키고 개성을 더할 수 있습니다. . 그러나 사용자 정의 글꼴을 통합하는 데는 나름의 어려움이 따릅니다. CSS에서 트루타입 글꼴(.ttf) 파일을 사용할 때 한 가지 일반적인 문제가 발생합니다.

문제:

사용자가 CSS 코드에 .ttf 파일을 포함했습니다. , 그러나 원하는 글꼴 변경 사항이 페이지에 적용되지 않습니다. 코드는 다음과 같습니다.

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

분석:

브라우저가 사용자 정의 글꼴을 표시하려면 널리 지원되는 여러 파일 형식을 제공하는 것이 중요합니다. . .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와 같은 웹 글꼴 생성기를 활용할 수 있습니다.

Chrome 6, Firefox 3.6 및 IE 9와 같은 최신 브라우저는 .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 요령: https://css-tricks. com/snippets/css/using-font-face/
• 사용할 수 있는 항목: https://caniuse.com/?search=fontface

위 내용은 내 사용자 정의 트루타입 글꼴(.ttf)이 CSS에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!