Open Sans字体兼容问题解决办法[font-face]

简介: 参考:http://www.tantengvip.com/2014/11/open-sans/ 1.font-face使用方法 font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到网页中 @font-face的语法规则: @font-face { font-f...

参考:http://www.tantengvip.com/2014/11/open-sans/

1.font-face使用方法

font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到网页中

@font-face的语法规则:
@font-face {
font-family: <FontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

 

2.Open Sans字体兼容问题解决办法

Open Sans字体兼容问题导致浏览器不显示数字,在wordpress的twentytwelve主题中采用了Open Sans字体。这个问题在chrome浏览器不存在,但是在360安全浏览器极速模式,safari,和百度浏览器中遇到了Open Sans字体兼容问题,页面上只要是数字的地方都显示空白。后来发现是因为浏览器无法显示Open Sans字体的原因。

 

在wordpress的twentytwelve主题样式表文件style.css中找到了这一句:

body.custom-font-enabled {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
去掉Open Sans就OK了,原因可能就是浏览器无法加载这个字体的缘故。wordpress默认是采用谷歌的字体服务,连接到fonts.googleapi.com,但是速度太慢了,改用了useso的服务器,按理说这个倒没有什么影响,但是许多浏览器页面上只要是数字的地方就是空白的,css中去掉Open Sans就好了,应该就是Open Sans字体的兼容问题。
 
 
相关文章
|
前端开发 API
css:网页引入字体@font-face以及动态加载字体
css:网页引入字体@font-face以及动态加载字体
278 0
css:网页引入字体@font-face以及动态加载字体
|
17天前
|
前端开发
字体变化[font-variant]
字体变化[font-variant]。
11 2
|
17天前
|
前端开发
字体浓淡[font-weight]
字体浓淡[font-weight]。
11 2
|
28天前
|
缓存 Linux Windows
Linux下安装宋体以及微软雅黑字体-转PDF后不显示中文,以及中文乱码
Linux下安装宋体以及微软雅黑字体-转PDF后不显示中文,以及中文乱码
45 0
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1051 0
Font-Awesome4.7.0版本字体图标显示问题
|
前端开发
CSS3中引入多种自定义字体(font-face)
CSS3中引入多种自定义字体(font-face)
397 0
CSS3中引入多种自定义字体(font-face)
|
前端开发
font-awesome不显示以及字体样式的引入方式:
font-awesome不显示以及字体样式的引入方式:
633 0
font-awesome不显示以及字体样式的引入方式:
WORD中使用类似苹果手机的字体Lucida Sans
WORD中使用类似苹果手机的字体Lucida Sans
450 0
|
前端开发
CSS利用@font-face使用自定义字符和图标
昨天发的一个教程被一顿喷,说已经不用图片了,什么图标字体啦,好桑心~~,但也是事实,现在的前端图片越来越少了,相应替换的是css以及图标字体,所以去探测了几个网站,找了一下style.css 文件,看看具体的CSS内容,然后发现这是一个很有趣的问题。
1166 0

热门文章

最新文章