IE8 CSS @ font-face 글꼴은 콘텐츠가 끝나기 전, 가끔 새로 고침 / 하드 새로 고침시에만 작동합니다.
업데이트 :이 문제에 대해 배운 내용에 대한 블로그 게시물을 작성했습니다. 나는 여전히 그것을 완전히 이해하지 못하지만 누군가가 이것을 읽고 내 문제에 대해 밝힐 것입니다. http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8
@ font-face를 사용하여 아이콘에 대한 사용자 지정 글꼴을 가져 오는 페이지가 있습니다. 아이콘은 클래스로 생성됩니다.
.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}
그리고 짜잔, 나는 "A"에 사용 된 아이콘이 무엇이든 가지고있다. 꽤 표준적인 것들은 IE8을 포함한 모든 브라우저에서 작동합니다.
그러나 IE8에는 기괴한 버그가 있습니다. 페이지가로드 될 때 글꼴이 작동하지 않습니다. 아이콘 대신 사방에 글자가 있습니다. 페이지 (본문) 위로 마우스를 가져 가면 글자의 절반이 아이콘이됩니다. 나머지는 마우스 커서를 올리면 아이콘이됩니다.
따라서 글꼴이 제대로 포함됩니다. font-family 및 content 속성이 모두 작동하지만 다른 원인으로 인해 아이콘이 마우스 오버 된 후에 만로드됩니다.
따라서 : before {content : 'a'}와 함께 글꼴을 사용하려고 할 때 IE8에서 @ font-face에 일종의 버그가 있지만 버그가 무엇인지 모르겠습니다.
비슷한 버그 / IE8 문제 / 무엇이든 여기에서 몇 시간 동안 검색했지만 운이 없었고 미쳐 버릴 것입니다. 제안 사항이 있습니까?
도움이 될만한 정보를 더 제공 할 수 있는지 알려주세요.
편집 : 블로그 게시물에 대한 끊어진 링크를 업데이트했습니다.
나는 같은 버그가 있었다.
domready에서이 스크립트를 실행하여 수정했습니다 (물론 IE8에만 해당).
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important';
head.appendChild(style);
setTimeout(function(){
head.removeChild(style);
}, 0);
이를 통해 IE8은 모든 :before및 :after유사 요소를 다시 그릴 수 있습니다.
나는 최근에 이것을 만났고 CSS 파일에 @ font-face를 두 번 포함하여 수정했습니다. 첫 번째 @ font-face는 IE에서 사용하고 두 번째는 다른 브라우저에서 사용합니다.
@font-face {
font-family: "SocialFoundicons";
src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "SocialFoundicons";
src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
출처 : http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20
나는 똑같은 문제를 실험하고 있었다. IE8에서 웹 폰트 아이콘 (의사 요소 사용)은 때때로 대체 글꼴을 렌더링하지만 마우스를 가져 가면 웹 폰트 아이콘이 표시됩니다.
아이콘은 다음과 같이 IE7 지원과 함께 : after 및 : before를 사용하여 구현되었습니다 .
필자의 경우 프로젝트는 HTML5로 개발되었으며 htmlshiv 를 사용하여 이전 브라우저에서 새로운 HTML5 태그를 지원합니다.
이 문제는 html5shiv 스크립트 태그를 기본 CSS 아래에 배치하는 것이 엄청나게 해결되었습니다.
<link rel="stylesheet" href="/stylesheets/main.css" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
나는 지금 행복하다 :) 나는 그것이 도움이되기를 바란다!
부모 요소 위로 마우스를 가져갈 때까지 글꼴이 표시되지 않는 비슷한 문제가 발생했습니다. 부모 요소에 대한 포커스 이벤트를 트리거하여이 문제를 해결할 수있었습니다.
element.parent (). trigger ( 'focus');
이것이 누군가를 돕기를 바랍니다!
해결 방법 :
IE8의 경우 스타일 시트를 찾아 문서 준비 완료 :
샘플 HTML :
<!DOCTYPE html>
<html>
<head>
<!-- … -->
<link id="base-css" rel="stylesheet" href="/styles.base.css" type="text/css" />
<!-- … -->
</head>
<!-- … -->
</html>
샘플 JavaScript :
// Reload stylesheet on document ready if IE8
if ($.browser.msie && 8 == parseInt($.browser.version)) {
$(function() {
var $ss = $('#base-css');
$ss[0].href = $ss[0].href;
});
}
위의 솔루션은 IE8을 새로 고칠 때 문제를 해결하지 못했습니다. 또한 스타일 시트를 추가하면 IE8 배경 크기 수정 backgroundsize.min.htc가 깨지는 몇 가지 문제를 발견했습니다.
그래서 내가 한 일은 다음과 같습니다.
html 태그에 ie8 클래스 추가 :
<!--[if IE 8 ]><html class="ie8"><![endif]-->
본문에 로딩 클래스 추가 :
<body class='loading'>
IE8에 대해서만 CSS 콘텐츠 속성을 재정의합니다.
<style>
.ie8 .loading .icon:before {
content: '' !important;
}
</style>
이제 DOM 준비에서 로딩 클래스를 제거하십시오.
$( function() {
$('body').removeClass('loading')
} );
이제 작동합니다!
@ausi의 답변에 따라 jQuery 및 CoffeeScript를 사용하여이를 4 줄로 리팩토링 할 수 있습니다.
$(document).ready ->
$style = $('<style type="text/css">:before,:after{content:none !important}</style>')
$('head').append $style
setTimeout (-> $style.remove()), 0
또는 JavaScript 구문으로 :
$(document).ready(function() {
var $style;
$style = $('<style type="text/css">:before,:after{content:none !important}</style>');
$('head').append($style);
return setTimeout((function() {
return $style.remove();
}), 0);
});
Chrome에서도 비슷한 결함이 발생했습니다. 내 수정 사항은 다음과 같습니다.
setTimeout(function(){
jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>');
},100);
내 생각에는 웹 폰트가 준비되기 전에 의사 CSS 스타일이 렌더링되어 빈 글리프가 생성되었습니다. 페이지가로드 된 후 어떤 식 으로든 CSS를 가리 키거나 변경하면 마술처럼 표시됩니다. 그래서 내 수정은 아무것도하지 않는 CSS 업데이트를 강제합니다.
나에게 문제는 !importantcontent 속성에 대한 선언 을 사용하여 간단히 해결되었습니다 .
즉 :
.icon:before {
content: "\f108" !important;
}
Alright, so I've been trying to fix this issue for a while. Weirdly enough the icomoon demo kept working in IE8 but mine never did, even though I felt like I had pretty much the same thing in place. So I started boiling everything down (the icomoon demo as well as my own implementation) and what I found two things that needed to be there for this to work.
First, I found that I needed to keep the cachebuster on the filename.
So in my implementation I had:
@font-face {
font-family: 'iconFont';
src:url('icon_font.eot');
src:url('icon_font.eot') format('embedded-opentype'),
url('icon_font.woff') format('woff'),
url('icon_font.ttf') format('truetype'),
url('icon_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
But what I needed was:
@font-face {
font-family: 'iconFont';
src:url('icon_font.eot?-v9zs5u');
src:url('icon_font.eot?#iefix-v9zs5u') format('embedded-opentype'),
url('icon_font.woff?-v9zs5u') format('woff'),
url('icon_font.ttf?-v9zs5u') format('truetype'),
url('icon_font.svg?-v9zs5u#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Second, and this one doesn't make sense, is that I needed something in the stylesheet that had a :hover pseudo selector. It doesn't matter what it's on or what the rules for it are, it just needed something and then the icons would appear when I hovered over them.
So I simply inserted [data-icon]:hover{} into my CSS stylesheet (just like that, without any rules).
I wish I could explain to you why this works, but I don't understand. My best guess is that this triggers some sort of refresh in IE8 and causes the icons to show up.
My IE8 issue was solved by removing the double-colon in the pseudo-element selector.
Does not display an icon in IE8...
.icon::before {
content: "\76";
}
Does display an icon in IE8...
.icon:before {
content: "\76";
}
Ok so here's a variation of @ausi's solution that I've used which has worked for me. This solution comes from Adam's comment at the bottom of this article http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/
I thought I'd put it here in more detail to make it quicker for others to use.
Set an extra class eg. ie-loading-fix on the html tag for IE8. Include all your CSS and then after that have a conditional JS file for IE8. For example:
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie-loading-fix"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Include all your CSS before JS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/ie.js"></script>
<![endif]-->
</head>
...
Then at the top of your main CSS file include something like:
.ie-loading-fix :before,
.ie-loading-fix :after {
content: none !important;
}
Then in your IE8 js/ie.js file include the following:
window.onload = function () {
var cname = document.documentElement.className;
cname = cname.replace('ie-loading-fix', '');
document.documentElement.className = cname;
}
This JS will remove the ie-loading-fix styling which is hiding all :before and :after content and will force IE8 to redraw all :before and :after content once the page has loaded.
This solution fixed an issue I was having with Font Awesome v4.4 which would frequently switch IE8 into Compatibility View or crash even though I was explicitly setting the page to load in Edge mode using the meta tag.
If I am not wrong then IE doesn't reads TTF font, it requires EOT fonts
I did some research as per @vieron answer and it turns out that another way to fix this problem is to block page rendering for a few miliseconds so font could be loaded before content. Though, blocking page rendering isn't smartest way to solve this, because you can't know how much ms you should block.
I proved it by putting php file as source file for javascript.
<!--[if lt IE 9]>
<script src="/block.php"></script>
<![endif]-->
block.php
<?php
usleep(200000);
?>
If you have any external javascript libraries such as HTML5shiv, this happens automagically, except you are running site on local network (intranet or localhost) with very low latency and no scripts before content.
That explains the fact that the problem isn't more widespreaded and noticed.
I really tried hard to find an elegant solution, but I can't find something that excludes javascript or blocking page rendering for IE.
This is the fix, we have faced this issue with IE7, IE8 and IE9 when using ajax
setInterval(function(){
var $ss = $('#base-css');
$ss[0].href = $ss[0].href;
},300);
ReferenceURL : https://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes
'developer tip' 카테고리의 다른 글
| 현재 날짜를 epoch 타임 스탬프로 변환하는 방법은 무엇입니까? (0) | 2020.12.15 |
|---|---|
| Spring RESTTemplate을 사용한 제네릭 (0) | 2020.12.15 |
| 자바 스크립트 연관 배열의 길이 (0) | 2020.12.15 |
| Spring은 Map Bean을 autowire 할 수 없습니다. (0) | 2020.12.15 |
| 서브 플롯의 파이썬 xticks (0) | 2020.12.15 |