브라우저에만 부하 내 CSS의

부분을 읽 하나 개의 글꼴 :브라우저에만 부하 내 CSS의

@font-face { 
    font-family: "Clarendon"; 
    font-style: normal; 
    font-weight: 300; 
    src: url("fonts/Fontspring-DEMO-Clarendon-Light.otf") format("opentype"); 
} 
@font-face { 
    font-family: "Clarendon"; 
    font-style: normal; 
    font-weight: 500; 
    src: url("fonts/Fontspring-DEMO-Clarendon-Medium.otf") format("opentype"); 
} 
@font-face { 
    font-family: "Clarendon"; 
    font-style: normal; 
    font-weight: 700; 
    src: url("fonts/Fontspring-DEMO-Clarendon-Bold.otf") format("opentype"); 
} 
@font-face { 
    font-family: "Clarendon"; 
    font-style: normal; 
    font-weight: 800; 
    src: url("fonts/Fontspring-DEMO-Clarendon-Xbold.otf") format("opentype"); 
}

하지만 브라우저에서만로드 한 글꼴입니다.

한 글꼴을 제외한 모든 글꼴에 주석을 달면 지정된 글꼴 만로드됩니다. (dev 도구 네트워크 탭으로)
둘 이상의 글꼴이 정의 된 경우 : 항상 fonts/Fontspring-DEMO-Clarendon-Medium.otf입니다.
Chrome과 Firefox를 모두 시도했습니다. 같은 행동.

내가 뭘 잘못하고 있니?

출처

2017-11-30 UTAN_dev

모든 글꼴이 한 페이지에 사용됩니까? – castis

"한 페이지에 사용 중"이라고 쓰고 "used"라는 단어를 쳤습니다. 물론, 모든 글꼴이 다운로드되지는 않았습니다. 아직 사용되지 않았습니다. 각 글꼴을 사용하여 몇 가지 테스트 스타일을 만들 자마자 실제로로드 된 것을 발견했습니다. * facepalm * 도움 주셔서 감사합니다. –

@ font-face 선언의 글꼴은 실제로 페이지에서 사용되는 경우에만로드됩니다.

출처

2017-11-30 20:56:11

당신이 그것을 알아 낸 것을 기쁘게 생각합니다! – castis

답변

관련 문제