Wordpress - 브라우저마다 다양한 글꼴 두께

Question

중복 정리 -이 질문은 글꼴 가중치의 브라우저 간 차이점과 관련이 있습니다. 가능한 중복으로 강조 표시된 질문은 글꼴 파일을 올바르게 업로드하는 것과 관련이 있습니다.

저는 html5blank의 하위 테마를 사용하여 Wordpress에 사이트를 업로드하고 있으며 독립형 프론트 엔드 텍스트 파일로는 얻을 수없는 여러 브라우저에서 다양한 글꼴 가중치를 사용하고 있습니다. 이것은 내가 호버 효과 텍스트에 무슨 뜻한다 -

크롬/사파리

파이어 폭스

(이것이 내가 원하는 것입니다) 이 스택의 응답 코드를 사용하려고했습니다. question

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
} 

하지만 작동하지 않았습니다. font-weight: bold;을 사용하면 Chrome에서 작동하지만 Firefox와 Safari는 버립니다. 이 글꼴은 제가 사용하고있는 글꼴입니다 -

@font-face { 
    font-family: 'Gotham-Light'; 
    src: url('fonts/Gotham-Light.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 

} 

body { 
     font-family: 'Gotham-Light', sans-serif; 
     font-size: 16px; 
     -webkit-font-smoothing: subpixel-antialiased; 

    } 

이 문제를 해결할 수있는 방법이 있습니까? 클라이언트는 디자인 전문가이며 이와 같은 것들에 대해 매우 구체적입니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

먼저, 브라우저 간 호환성을 위해 그 서체와 관련된 글꼴 모든 유형이 있어야합니다

Font Squirrel Webfont Generator

그리고 :

CSS3 Web Fonts

당신은 실제로 여기를 만들 수 있습니다 때때로 브라우저가 다른 글꼴을 처리하는 방법을 제어 할 수 없습니다. Safari는 Firefox와 완전히 다른 기능을합니다.

마지막으로, "bold"와 "light"대신 실제 글꼴 WEIGHTS를 사용하는 것이 좋습니다.

예 :

body { 
    font-family: 'Gotham-Light', sans-serif; 
    font-weight: 300; 
    font-size: 16px; 
    -webkit-font-smoothing: subpixel-antialiased; 

} 

도움이 되었기를 바랍니다.