这篇文章起因在于我在样式里给body加注了字体,且是各个浏览器通用的Arial和兰亭黑。但是产品跑过来和我说字体在她的浏览器上和设计稿差异很大。于是我一脸蒙蔽的开始了调研之路...
一、font-family定义和用法 *
font-family 规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称:
- 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
- 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。
注意:使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。
备注: sans-serif就是无衬线字体,是一种通用字体族。常见的无衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。font-family最后加上sans-serif,也是为了保证能够调用这个字体族里面的字体,因为大多数计算机里都有这种字体。
二、导入浏览器没有的字体 **
按例抛射出一个比较苦涩的定义(就是我不太喜欢看的形式,但是该有的属性都定义了的那种,哈哈)
语法规则:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
接下来抛射出一个example(就是我这种头脑简单的比较喜欢看到的形式,哈哈)
@font-face{
font-family: "Hiragino sans GB W3"; //你需要给你的字体起一个名字
src: url('../font/font.ttf');
}
html,body,div,span,h1,h2,h3,h4,h5,h6,p{
font: normal 16px "Hiragino sans GB W3",sans-serif;
vertical-align:baseline;
outline:none;
box-sizing:border-box;
}
提示:说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体。
注意:url请使用小写字母的字体,用大写在IE下会出现你喜欢的“惊喜”。当然歌里告诉我们平平淡淡才是真。所以这种惊喜就不要了。
三、在body里定义了字体样式在浏览器中不起作用的解决方案 ***
说了这么久,终于来到了本篇的正题。下面直接贴解决方案啦。
1.检查你的字体是不是用中文写的,尽管支持utf-8和gb2312,但是同样为了避开“可爱小甜甜” ie出现的各种问题。建议直接写font-family:arial,这种格式的。看到一篇文章写到ie6下font-family:"黑体"会报错,改成font-family:黑体。即把引号去掉就可以正常显示。大家可以做一个参考把。
2.当此属性定义的是全局样式,对于表单类的标签就不会生效,需要再次定义。eg:
body{
font-family:arial;
}
对表单input就不生效。还需要定义一个input
input{
font-family:arial;
}
3.本地计算机不存在微软雅黑字体,有的系统默认没有微软雅黑体,则一般默认为宋体,只要下载一个微软雅黑字体,安装后即可。(个人觉得这个方法基本是废的,毕竟作为程序员我们的工作就是解决差异。而不是让用户去下载字体,这是极羞耻的...)
4.如果以上错误你都没踩坑,那么你有80%的概率跟博主一样。这里你需要在你想要修改的地方增加font-family样式。eg.
<div class="text-change">
<li>测试字体</li>
</div>
如果想要修改“测试字体”的样式。尽管你在body里写了body{font-family:arial;}仍然无效。那么。请你在.text-change的样式中添加{font-family:arial;},此方法我在网上搜了一下没有人解释原因,好像也没有人遇到这种奇葩的问题。
但是博主用这个方法成功怼过了产品挑剔的双眼。这个方法在我这儿暂时无敌把。
备注:常用中文字体编码表
四、关于同一字体在不同浏览器下显示不同问题 ****
这个问题想必困扰了前端工程师们很久很久。经过楼主的调研。我惊讶的发现。此题现在仍然无解。
所以:你无法去使你要的字体在每一个浏览器上显示出来的效果一样。