IE에서 Google Fonts를 작동시키는 방법은 무엇입니까?

Program Tip

IE에서 Google Fonts를 작동시키는 방법은 무엇입니까?

programtip 2020. 11. 10. 22:10

IE에서 Google Fonts를 작동시키는 방법은 무엇입니까?

Google Fonts API 를 사용하는 사이트를 개발 중 입니다. 훌륭하고 IE에서 테스트 된 것으로 추정되지만 IE 8에서 테스트 할 때 글꼴 스타일이 지정되지 않습니다.

Google의 지시에 따라 글꼴을 포함했습니다 .

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"  
 rel="stylesheet" type="text/css" />

CSS의 글꼴 패밀리 앞에 이름을 추가했습니다.

body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}

Chrome, Firefox, Safari에서 매력처럼 작동합니다. IE 8에는 주사위가 없습니다. 이유를 아는 사람 있나요?

기술 고려 사항 페이지에 표시된대로 방법 은 정확하므로 잘못된 작업을 수행하지 않습니다. 그러나 Google 코드에 대한 이 버그 보고서 는 Google이이를 위해 만든 글꼴, 특히 IE 버전에 문제가 있음을 나타냅니다. 이것은 일부 글꼴에만 영향을 미치는 것처럼 보이지만 실제 충격입니다.

대화 목록의 답변은 문제가 Google이 제공하는 파일에 있음을 나타내므로 이에 대해 할 수있는 조치가 없습니다. 저자는 FontSquirrel 과 같은 대체 위치에서 글꼴을 가져와 대신 로컬로 제공 할 것을 제안합니다 .이 경우 League of Movable Type 과 같은 사이트에도 관심이있을 수 있습니다 .

NB 2010 년 10 월 현재이 문제는 Google 코드 버그 보고서에서 수정 및 종결 된 것으로보고됩니다.

IE8-IE7 이 태그를 사용하는 동일한 파일 요청 을 통해 여러 Google 웹 글꼴 스타일을 이해할 수없는 것 같습니다 .linkhref

이 두 링크는이 문제를 파악하는 데 도움이되었습니다.

이 참조 열린 구글의 문제를 , 그리고 의견을보실 수.
또한이 StackOverlow 답변을 참조하십시오 Google 웹 글꼴이 IE8에서 작동하지 않습니다.

IE7-IE8에서 작동하는 유일한 방법은 Google Web Font 요청을 하나만 갖는 것입니다. 만에 하나 개의 글꼴 스타일이 href의 link태그를 :

따라서 일반적으로 동일한 요청에서 여러 글꼴 스타일을 선언하여 다음과 같이합니다.

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />

그러나 IE7-IE8에서는 IE 조건을 추가하고 각 Google 글꼴 스타일을 개별적으로 지정 하면 작동합니다.

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->

이것이 다른 사람들을 도울 수 있기를 바랍니다!

Google Fonts는 W3C에서 권장하는 글꼴 형식이기 때문에 좋은 WOFF (Web Open Font Format)를 사용합니다.

IE9 이전의 IE 버전은 WOFF (Web Open Font Format)를 지원하지 않습니다. 그 당시에는 존재하지 않았기 때문입니다. <IE9를 지원하려면 EOT (Embedded Open Type)로 글꼴을 제공해야합니다. 이렇게하려면 Google의 포함 스크립트를 사용하는 대신 고유 한 @ font-face css 태그를 작성해야합니다. 또한 원본 WOFF 파일을 EOT로 변환해야합니다.

먼저 TTF로 변환 한 다음 EOT로 변환하여 여기에서 WOFF를 EOT로 변환 할 수 있습니다. http://convertfonts.com/

그런 다음 다음과 같이 EOT 글꼴을 제공 할 수 있습니다.

@font-face {
    font-family: 'MyFont';
    src: url('myfont.eot');
}

이제 <IE9에서 작동합니다. 그러나 최신 브라우저는 더 이상 EOT를 지원하지 않으므로 이제 글꼴이 최신 브라우저에서 작동하지 않습니다. 따라서 둘 다 지정해야합니다. src 속성은 글꼴 URL을 쉼표로 구분하고 유형을 지정하여이를 지원합니다.

src: url('myfont.woff') format('woff'),
     url('myfont.eot') format('embedded-opentype');

그러나 <IE9는 이것을 이해하지 못하고 첫 번째 따옴표와 마지막 따옴표 사이의 텍스트를 잡기 때문에 실제로 다음을 얻습니다.

myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype

글꼴의 URL로. 먼저 EOT 형식 인 URL이 하나만있는 src를 지정한 다음 최신 브라우저를위한 두 번째 src 속성을 지정하면 <IE9가 이해하지 못합니다. <IE9는이를 이해하지 못하기 때문에 태그를 무시하므로 EOT가 계속 작동합니다. 최신 브라우저는 지원하는 마지막 지정된 글꼴을 사용하므로 아마도 WOFF 일 것입니다.

src: url('myfont.eot');
src: url('myfont.woff') format('woff');

따라서 두 번째 src 속성에서 format('woff'), <IE9는 이해하지 못하고 (또는 실제로 url에서 글꼴을 찾을 수 없음 myfont.woff') format('woff) 첫 번째 지정된 속성 (eot)을 계속 사용하기 때문입니다.

이제 <IE9 및 최신 브라우저에서 작동하는 Google 웹 폰트가 생겼습니다!

다양한 글꼴 유형 및 브라우저 지원에 대한 자세한 내용은 Alex Tatiyants의 완벽한 기사를 참조하십시오. http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

Yi Jiang의 솔루션이 작동 할 수 있지만 Google Web Font API를 포기하는 것이 올바른 답이라고 생각하지 않습니다. CDN에서 제대로로드되지 않은 경우 로컬 jQuery 파일을 제공합니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>

그렇다면 글꼴, 특히 <IE9에 대해 동일한 작업을 수행하지 않는 이유는 무엇입니까?

<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->

사용자 정의 글꼴을 사용할 때의 프로세스는 다음과 같습니다.

Google에서 글꼴의 ZIP 폴더를 다운로드하고 Font Squirrel의 @ font-face Generator 를 사용하여 로컬 웹 글꼴을 만듭니다.

fonts.css새로 생성 된 로컬 호스팅 글꼴 파일을 호출 하는 파일을 생성합니다 (위에 표시된 것처럼 <IE9 인 경우에만 파일에 연결됨). 참고 : @ font-face 생성기가이 파일을 생성합니다.

@font-face {
  font-family: 'cardoitalic';
  src: url('cardo-italic-webfont.eot');
  src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('cardo-italic-webfont.woff') format('woff'),
    url('cardo-italic-webfont.ttf') format('truetype'),
    url('cardo-italic-webfont.svg#cardoitalic') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cardobold';
  src: url('cardo-bold-webfont.eot');
  src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('cardo-bold-webfont.woff') format('woff'),
    url('cardo-bold-webfont.ttf') format('truetype'),
    url('cardo-bold-webfont.svg#cardobold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cardoregular';
  src: url('cardo-regular-webfont.eot');
  src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('cardo-regular-webfont.woff') format('woff'),
     url('cardo-regular-webfont.ttf') format('truetype'),
     url('cardo-regular-webfont.svg#cardoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

가짜 가중치 및 스타일 을 피하기 위해 기본 스타일 시트에서 IE 조건부 클래스를 사용하면 글꼴 스타일은 다음과 같습니다.

h1{
  font-size:3.25em;
  font-weight:normal;
  font-style:italic;
  font-family:'Cardo','cardoitalic',serif;
  line-height:1.25em;
}
h2{
  font-size:2.75em;
  font-weight:700;
  font-family:'Cardo','cardobold',serif;
  line-height:1.25em;
}
strong
,b{
  font-family:'Cardo','cardobold',serif;
  font-weight:700,
}
.lt-ie9 h1{
  font-style:normal;
}
.lt-ie9 h2{
  font-weight:normal;
}
.lt-ie9 strong,
.lt-ie9 b{
  font-weight:normal,
}

물론 약간의 추가 작업이지만 IE에서 기대하지 않았습니까? 게다가 잠시 후 제 2의 자연이된다.

그 가치가 무엇인지, IE7 / 8 / 9에서 작동하도록 할 수 없었고 다중 선언 옵션은 어떤 차이도 만들지 않았습니다.

The fix for me was as a result of the instructions on the Technical Considerations Page where it highlights...

For best display in IE, make the stylesheet 'link' tag the first element in the HTML 'head' section.

Works across IE7/8/9 for me now.

I tried all the options from above and they didn't work. Then I located the google font (Over the Rainbow) in my folder (new) and used IE conditional below and it worked perfect.

<!--[if IE]>
<style type="text/css">
    @font-face {
    font-family: "Over the Rainbow";
    src: url("../new/over.ttf");
    src: local("Over the Rainbow"), url("../new/over.ttf");
    }
</style>
<![endif]-->

I hope it will help

You can try fontsforweb.com where fonts are working for all browsers, because they are provided in TTF, WOFF and EOT formats together with CSS code ready to be pasted on your page i.e.

@font-face{ 
    font-family: "gothambold1";
    src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot');
    src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype");
}
.fontsforweb_fontid_5903 {
    font-family: "gothambold1";
}

or you can download them zipped in a package with CSS file attached

then just add class to any element to apply that font i.e.

<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2>

See it working: http://jsfiddle.net/SD4MP/

It's all about trying all those answers, for me, nothing works except the next solution: Google font suggested

@import 'https://fonts.googleapis.com/css?family=Assistant';

But, I'm using here foreign language fonts, and it didn't work on IE11 only. I found out this solution that worked:

@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';

Hope that save someone precious time

Try this type of link , it will run in also IE . hope this helps .

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>

I had the same problem with you. I found a solution using a Adobe Web Fonts code, work perfect in Internet Explorer, Chrome, Firefox and Safari.

More info in this page: http://html.adobe.com/edge/webfonts/

After my investigation, I came up to this solution:

//writing the below line into the top of my style.css file
@import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew');

MUST OBSERVE: We must need to write the font-weight correctly of this font. For example: font-weight:900; will not work as we have not included 900 like 200,300,400,600,700,800 into the URL address while importing from Google with the above link. We can add or include 900 to the above URL, but that will work only if the above Google Font has this option while embedding.

참고URL : https://stackoverflow.com/questions/3694060/how-to-make-google-fonts-work-in-ie

'Program Tip' 카테고리의 다른 글

인터페이스 메소드의 구현을 어떻게 빨리 찾을 수 있습니까? (0)	2020.11.10
Rails 컨트롤러에서 직접 HTML을 반환하는 방법은 무엇입니까? (0)	2020.11.10
읽기 전용 모드로 vim의 탭에서 파일 열기 (0)	2020.11.10
ListView getChildAt는 보이는 자식에 대해 null을 반환합니다. (0)	2020.11.10
C # 메서드의 반환 된 값을 처리하지 않아도 괜찮습니까? (0)	2020.11.10

현재글IE에서 Google Fonts를 작동시키는 방법은 무엇입니까?

programtip

IE에서 Google Fonts를 작동시키는 방법은 무엇입니까?

IE에서 Google Fonts를 작동시키는 방법은 무엇입니까?

'Program Tip' 카테고리의 다른 글

'Program Tip'의 다른글

티스토리툴바

IE에서 Google Fonts를 작동시키는 방법은 무엇입니까?

IE에서 Google Fonts를 작동시키는 방법은 무엇입니까?

'Program Tip' 카테고리의 다른 글

'Program Tip'의 다른글

관련글

티스토리툴바