Google 웹 글꼴이 로컬 글꼴과 충돌합니다

Question

Google 웹 글꼴 사용과 충돌이 있습니다.

이 머리에 : 여기 OK 코드입니다

<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> 

을 그리고 이것은 CSS 파일에 있습니다

body { 
font-family: 'Oswald', sans-serif; 
font-weight: 700; } 

"오스왈드"의 글꼴 가족 3 가지 글꼴 :

• 3 책 (300)
대담 (700)

당신은 ... 나는 단지 굵은면 (700)을로드 한 볼 수 있듯이 1,363,210

일반 (400)

.

내 컴퓨터에 설치되어있는 3 개 글꼴 (300,400,700)의 데스크톱 버전을 가지고만큼 : 문제는 ...

을 을 (당신은 쿼리에서 그것을 볼 수 있습니다) 그리고 여기까지 작동하지만 이 글꼴들은 활성화되었습니다 ... 브라우저는 제 HTML- 문서에서 잘못된 글꼴 - 무게 (400)를 보여줍니다.

확인. 문제는 나의 css에서 'Oswald'는 webfont가 아닌 localfont를 사용한다는 것입니다. 그러나 로컬 글꼴 "Oswald"는 "Oswald normal"입니다. 나는 왜 구글이 'Oswald Bold'대신 'Oswald'라고 부르는 지 모르겠다. 그래서이 문제를 해결하는 방법을 모른다.

CSS가 로컬 글꼴을 가리 키지 않게하고 싶습니다. 올바른 글꼴 두께 때문에 항상 웹 폰트를 표시하고 싶습니다!

의견이 있으십니까? 주세요.

webfont-call의 이름을 바꿀 수 있습니까?

Answer 1

Google규칙을 Google에서 자동으로 생성 된 규칙을로드하는 대신 필요에 맞게 편집 할 수 있습니다. 근본적으로 문제는 그들의 규칙이 로컬 버전 (src: local('Oswald Bold'), local('Oswald-Bold'), ...)을 선호한다는 것입니다.

@font-face { 
    font-family: 'WebOswald'; 
    font-style: normal; 
    font-weight: 700; 
    src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 

그냥 수동으로 CSS에 그것을 추가하고 글꼴의 구글의 웹 버전을 사용하고자 할 때 font-family: 'WebOswald';를 사용 : 같은 수정 된적인 버전이 보일 것이다.

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