웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법은 무엇입니까?

웹 페이지에 로컬 설치된 글꼴을 적용하십시오

웹 디자인에서는 이미 시스템에 설치된 특정 글꼴을 사용하지만 CSS에서 글꼴 이름을 직접 사용하는 것은 작동하지 않습니다. 이 기사는 웹 페이지에서 로컬로 설치된 글꼴을 올바르게 호출하는 방법을 보여줍니다.

문제 : 웹 페이지에는 로컬 글꼴을 표시 할 수 없습니다

글꼴 "Jingnan Mai Round"를 설치했지만 CSS 코드를 설치했다고 가정합니다.

 html, body {
  글꼴 크기 : 18px;
  Font-Family : "Jingnan Mai Round Body", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

"Jingnan Mai Round Body"대신 "Microsoft Yahei"를 여전히 표시합니다. 글꼴 파일의 크기가 크기 때문에 src 속성을 통해 글꼴 파일을로드하고 싶지 않습니다.

해결책 : @font-face 규칙을 사용하십시오

이 문제를 해결하는 핵심은 @font-face 규칙을 사용하여 사용자 정의 글꼴을 정의하고 웹 페이지 요소에 적용 할 수 있습니다. 로컬로 설치된 글꼴을 사용하려면 src 경로를 지정할 필요가 없습니다. 브라우저는 시스템에 설치된 글꼴을 자동으로 찾고 사용합니다.

올바른 CSS 코드는 다음과 같습니다.

 @font-face {
  Font-Family : 'Jingnanmaiyuanti'; /* 글꼴 이름을 정의하면 영어 이름을 사용하는 것이 좋습니다*/
}

html, body {
  글꼴 크기 : 18px;
  Font-Family : 'Jingnanmaiyuanti', "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

열쇠는 다음과 같습니다.

1. 글꼴 이름 정의 : 중국 이름에서 발생할 수있는 호환성 문제를 피하기 위해 @font-face 규칙에서 쉽게 인식 가능한 글꼴 이름 (예 : 영어 이름)을 정의하십시오.
2. 글꼴 이름 사용 : font-family 속성에서 1 단계에 정의 된 글꼴 이름을 사용하십시오. 브라우저는이 이름에 해당하는 글꼴을 찾는 데 우선 순위를 정합니다. 찾을 수없는 경우 대체 글꼴이 차례로 사용됩니다.

CSS 코드를 수정 한 후에도 여전히 표시되지 않으면 브라우저 캐시를 새로 고치거나 브라우저를 다시 시작하십시오. 운영 체제가 올바르게 설치되고 활성화되어 있는지 확인하십시오.

위 내용은 웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!