浅析font-family属性及在不同浏览器显示差异问题

   这篇文章起因在于我在样式里给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;}，此方法我在网上搜了一下没有人解释原因，好像也没有人遇到这种奇葩的问题。

  但是博主用这个方法成功怼过了产品挑剔的双眼。这个方法在我这儿暂时无敌把。

  备注：常用中文字体编码表

  



  








    

  四、关于同一字体在不同浏览器下显示不同问题  ＊＊＊＊

  这个问题想必困扰了前端工程师们很久很久。经过楼主的调研。我惊讶的发现。此题现在仍然无解。

   所以：你无法去使你要的字体在每一个浏览器上显示出来的效果一样。