IE8下@font-face引入特殊字体兼容问题（format|?#iefix|两个url三问）

问题表现：
使用@font-face引入自定义特殊字体，在IE8环境下报错“@font-face遇到了未知错误”，表现为字体丢失。

问题分析：
我们常用的字体文件的格式如：

TrueType、Web Open Font格式对于IE浏览器来说，在IE9+版本才支持。IE8只支持Embedded Open Type格式的字体文件(.eot)。所以IE8环境下，想要引入自定义特殊字体，只能想办法转换格式或者下载.eot格式的字体文件。字体格式转换网址
IE8环境下可以识别.eot字体但是要写format(‘embedded-opentype’)添加验证。

问题解决

<div>字体测试</div><style>@font-face {font-family: "yhg";src: url(../fonts/方正清刻本悦宋简体.eot);src: url(../fonts/方正清刻本悦宋简体.eot?#iefix) format('embedded-opentype'),url(../fonts/方正清刻本悦宋简体.TTF) format('truetype');font-weight: normal;font-style: normal;}div {font-family: "yhg";}</style>

模拟IE8环境

效果：

format用于标注字体的格式，方便浏览器识别。
?#iefix：IE8版本环境，当 src 中包含多个 url 时无法正确解析返回 404 ，而其他浏览器没有这个问题。因此将 EOT 格式的引入放在最前面，然后在 url 后加上 ?，这样 IE8环境时会把问号之后的内容当作 url 的参数。 #iefix 一是注释，二是可以将 url 参数变为锚点，减少发送给服务器的字符。
两个url：微软修改了在兼容模式下的 CSS 解析器，导致上面提到的使用 ? 的方案失效。由于 CSS 是从下往上解析的，所以在上面添加一个不带问号的 src 属性便可以解决此问题。

IE8下@font-face引入特殊字体兼容问题（format|?#iefix|两个url三问）相关推荐

@font-face引入自定义字体兼容IE
废话说在前头最近在给学校做网站,经理要求字体必须要兼容IE,有意思的是居然没人会搞这个引入外部字体兼容!在我最无望的时候甚至还发现了百度.淘宝都向万恶的IE字体屈服了. 但最后还是CSDN爸爸救了我 ...
ie6、ie7、ie8下支持js 使用vml style.addRule('v\\:line,v\\:stroken',behavior:url(#default#VML);)
ie6.ie7.ie8下支持js 使用vml 2010-11-17 10:52:40| 分类: 计算机和编程 | 标签:ie6.ie7.ie8下支持js 使用vml |举报|字号订阅之前 ...
css引入外部字体的压缩方法，解决网页加载太慢
最近在做网站的时候,发现大多都是常见字体,想用@font-face引入一些特殊的字体,发现文件太大,动不动几十兆,影响网页加载速度,在网上找了半天,发现大多都是使用一款名字为字蛛的字体压缩器,http ...
前端页面引入外部字体 @font-face 的使用方法
通过 @font-face 属性来引入外部字体代码如下 @font-face {font-family: 'arailRegular';src: url('../font/Arial-Black.t ...
rgba背景是黑灰色html,IE8下兼容rgba颜色的半透明背景_html/css_WEB-ITnose
在工作中做一个图片半透明遮罩时发现在IE8下不兼容一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue ...
遭遇IE8下的JavaScript兼容问题
博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: var a = document.creat ...
bootstrap在ie8下，兼容媒体查询
最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...
前端React项目的Next.js项目通过CSS引入自定义字体文件
最近在Web3的项目,需要引入自定义字体,做下记录: 1. 如果是下载的字体文件,直接能使用的就不需要转换,如果是TTF格式则需要转换成eot.svg.woff.woff2,这里提供一个网站Font ...
css设置各种中文字体如雅黑、黑体、宋体等等，引入新字体
一.设置默认字体 body{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHei ...

IE8下@font-face引入特殊字体兼容问题（format|?#iefix|两个url三问）

IE8下@font-face引入特殊字体兼容问题（format|?#iefix|两个url三问）相关推荐

最新文章

热门文章