Question

Google 글꼴에 대한 질문이 있습니다. 나는 Google Fonts에서 글꼴 "Lato"를 사용하고 있으며 Firefox, Chrome, IE9에서는 완벽하게 작동하지만 Internet Explorer 7과 8에서는 기울임 꼴 버전이 실제로 확대되어 보입니다.

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic' rel='stylesheet' type='text/css'> 

이 구글 글꼴 알려진 문제인가, 아니면 그 것이다 :

내가 사용하는 글꼴을 포함하여 단지

font-style:italic; font-weight:700; 

를 사용하여 너무 미친 아무것도하고 있지 않다 내가 잘못하고있는 것?

감사합니다.

Answer 1

이유 (어쩌면 누군가가 그 이유를 도울 수 있음) 때문에 Google은 일반 사용자가 아닌 다른 글꼴 변종을 IE 사용자에게 제공하지 않기로 결정했습니다. 이 동작은 user-agent에 의해 제어되는 것으로 보입니다. CSS 대 url (귀하의 경우 http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic)을 Firefox와 IE에서로드하면 하나의 @font-face 블록 만 IE에 반환됩니다.

그래서 주위를 둘러 보는 가장 쉬운 방법은 Firefox에서 해당 URL을로드하고 Google에서 직접 제공하는 대신 CSS를 자신의 CSS 파일에 복사하여 붙여 넣는 것입니다. 이제 IE는 모든 글꼴 변형에 액세스 할 수 있지만 기술적으로는 CSS 파일과 기본 글꼴 파일 간의 연결을 끊습니다.이 글꼴은 이어야하며이 변경되지 않아야하지만 이는 전적으로 Google의 재량에 달려 있습니다.

불행한 점은 (아마도 추론의 일부일 수 있습니다.) IE는 글꼴을 특히 잘 렌더링하지 않습니다. 필자의 테스트에서, 세미 볼드의 무게는 볼더보다 커지고, 이탤릭체는 너무 멀리 떨어져있는 것처럼 보인다. 최소한이 변이없이 IE가 렌더링하는 가짜 기울임 꼴 글꼴보다 더 즐겁습니다.

편집 : 좀 더 연구 후에, 나는 철저하게 문제를 문서화 좋은 페이지 on Typekit을 발견했습니다. 기본적으로, IE는 사용자 정의 글꼴 패밀리의 경우 매우 제한적입니다. IE로 성공할 수있는 유일한 방법은 IE에서 개별 글꼴 패밀리로 변형을 정의한 다음 다른 글꼴을 사용하는 것입니다. 다른 브라우저에서는 font-weight 및 font-style을 사용합니다. 이것은 보편적 인 호환성을 제공해야합니다.

edit2 : IE 글꼴의 URL이 다른 브라우저의 URL과 다릅니다 (IE는 woff 대신 eot 형식을 사용함).

• 파이어 폭스/크롬/등에서 열기 http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic 새 파일에 CSS를 복사하거나, 즉 전용 스타일 시트에 다음과 같이 글꼴에 대해이 작업을 얻는 방법에 대한 철저한 과정이 될 것입니다.
• '로컬'및 '형식'src 정의를 모두 살펴보고 'url'부분 만 남겨 둡니다.
• 글꼴 스타일 시트 URL에 지정된 각 변형 (예 : 400, 700, 700italic 및 900italic)의 경우 IE에서 글꼴 스타일 시트를 변형으로이 변형 인으로로드하고 결과 CSS를 텍스트 편집기에서 엽니 다. . 예를 들어, http://fonts.googleapis.com/css?family=Lato:900italic을로드하면 이탤릭체로 표시됩니다.
• 새 스타일 시트에서 일치하는 변형을 찾으십시오 (font-style 및 font-weight 속성이 일치해야 함). woff src url을 IE의 eot one url로 바꿉니다. 또한 글꼴을 다른 가족에게 부여하십시오. Typekit do와 같은 스타일과 무게로 접미사를 사용하는 것이 좋습니다. 따라서 열기 Sans이 이됩니다. Sans i9 등이 열립니다.
• 나머지 모든 변형에 대해이 작업을 수행하십시오.
• 이미 다른 브라우저에서 사용하고있는 스타일 시트 대신 조건부로이 새 스타일 시트를 포함하십시오.
• 당신이 당신의 CSS에서 font-style 또는 font-weight을 사용했다든지, 다른 브라우저에서 볼 수 있듯이 새로운 가족의 이름 및 올바른 가족의 이름을 참조,뿐만 아니라 font-family 추가 할 수 있습니다. 예 : font-family: 'Open Sans i9', 'Open Sans'; font-weight: 900; font-style: italic;. 이렇게하면 IE 호환성을위한 글꼴 패밀리 이름과 다른 브라우저의 기본 패밀리 + 변형이 사용됩니다.

Answer 2

두 샘플이 동일한 기울임 꼴 글꼴을 표시하지 않습니다. 나는 IE7/8 중 하나가 인위적으로 이탤릭체 인 것으로 추측하고 있습니다. 폰트 가중치가 실제로 폰트 파일의 폰트 웨이트와 일치하지 않기 때문에 이것이 더 추측됩니다. 대신 500의 가중치를 사용해보십시오.

Answer 3

이전 질문이지만 IE8에서이 과도한 굵은 글꼴과 이탤릭체를 쉽게 해결할 수있는 방법을 찾기 위해 한 시간 씩 인터넷 검색을 실시했습니다. 여기 나를 위해 일한 : 모든 글꼴을 한 번에로드하는 대신 하나씩로드합니다. 나는 CSS 파일에서 @import 메소드를 선호하므로 다음과 같이 진행된다.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic); 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic); 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400); 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);