웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까?

웹 사이트 통합 로컬 글꼴 : "Jingnan Mai Round"의 디스플레이 문제 해결

시스템 글꼴을 성공적으로 설치 한 후 웹 페이지에서 올바르게 호출하는 방법은 무엇입니까? 이 기사는 웹 사이트에 로컬로 설치된 "Jingnan Mai Round"글꼴을 사용하는 방법을 해결하고 src 속성을 사용하여 글꼴 파일을 직접 소개하지 않도록합니다 (파일이 더 크기 때문에).

다음은 로컬 글꼴을 사용하려는 일반적인 CSS 코드 스 니펫입니다.

 /* @font-face {
    Font-Family : 'Myfont';
    src : url ( '/style1/font/jingnanmai round body.otf') 형식 ( 'truetype');
} */
html, body {
    글꼴 크기 : 18px;
    Font-Family : "Jingnan Mai Round Body", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

"Jingnan Mai Round"는 글꼴 목록의 상단에 배치되지만 웹 페이지에는 여전히 "Microsoft Yahei"가 표시됩니다. 문제는 브라우저가 로컬로 설치된 글꼴 파일 경로를 직접 인식 할 수 없다는 것입니다.

해결책:

CSS 코드를 수정하고 사용자 정의 글꼴을 올바르게 정의하고 적용해야합니다.

1. 글꼴 정의 ( @font-face) : Font 파일을 직접 소개하기 위해 src 사용하지 않지만 브라우저에 글꼴 이름을 알려주려면 여전히 @font-face 규칙이 필요합니다. 열쇠는 글꼴 파일 경로를 지정할 필요가 없으며 브라우저는 시스템 글꼴 라이브러리에서 자동으로 조회됩니다.

    @font-face {
       Font-Family : 'Jingnanmaiyuanti'; /* 더 깨끗한 글꼴 이름*/
   }

2. 글꼴 적용 : font-family 속성에서 1 단계에 정의 된 글꼴 이름을 사용하십시오.

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

위의 수정을 통해 브라우저는 "Jingnanmaiyuanti"라는 시스템 글꼴을 사용하는 데 우선 순위를 부여합니다. 글꼴이 시스템에 설치되면 웹 페이지가 올바르게 표시됩니다. 설치되지 않으면 대체 글꼴이 차례로 사용됩니다.

추가 제안 :

• 글꼴 이름 : JingNanMaiYuanTi 와 같은 단순하고 쉽게 기억하기 쉬운 글꼴 이름을 사용하여 공백이나 특수 문자가 포함 된 이름을 사용하지 마십시오.
• 브라우저 캐시 : CSS를 수정 한 후 브라우저 캐시를 지우거나 브라우저를 다시 시작하여 브라우저가 최신 CSS 규칙을로드하는지 확인하십시오.

이러한 조정을 사용하면 웹 페이지에 "Jingnan Mai Round"글꼴을 성공적으로 표시하면서 글꼴 파일의 직접 도입으로 인한로드 속도 문제를 피할 수 있어야합니다.

위 내용은 웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!