font-family设置,fontfamily设置字体需要注意什么
浅谈下页面中字体设置(font-family)和粗细(font-weight)问题
记得以前某某某天上午被设计师“调戏”了，记忆犹新啊，就是因为一个项目（PC和移动）中的字体问题，纠结了一上午，设计师非要字体效果跟设计稿上保持一致。那时那刻，我已无语，但是话说回来，大家都是为了项目的质量，所以得放平心态，反思，于是“诞生了”今天下午要分享的话题：CSS中的字体设置。
谈到“CSS中的字体”，老生常谈的话题了，做过设计和前端的童鞋都会略知一些其中的“奥妙”。在平时工作中，完成一个项目，从设计稿到页面最终的输出效果，就字体方面来说，细心的童鞋会发现有很多方面细活要去做的，当然了，这是建立在项目本身要求非常高的情况下。今天下午从两方面来讨论：设置(font-family)和粗细(font-weight)。
在写全局样式时，我们都会去设置一个默认的字体，举个例子：
上面的设置，页面上首选字体是平方字体，如电脑上没平方字体，就是显示微软雅黑，依次类推...
在设置一些中文字体的时候，有些童鞋（以前的我）喜欢直接用中文，其实不太好哟，还是回归到统一的英文，在这里分享一些常用中文转英文的字体：
大家可以收藏起来，便于查阅。
据我了解，不管是PC还是移动端，现在的设计师默认字体，中文的一般都习惯于“微软雅黑”、“微软正黑体”，“平方字体”；英文的选择比较多，常用的有arial等。由于PC设备不足，目前只有WINDOWS，效果跟设计稿出入不大。但是在移动端有时候就会纠结了，其原因就是我们不了解移动端不同设备自带的默认字体。当你跟设计师纠结此事时，作为前端攻城师，需要拿些证据去跟他们去理论。如下：
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
可以发现无论是ios、android还是wp系统中都是没有微软雅黑字体的，随后做了一个小测试，就是将微软雅黑字体的效果和各个系统默认字体的效果做了一下对比，发现无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。
各个手机系统有自己的默认字体，且都不支持微软雅黑。
如无特殊需求，手机端无需定义中文字体，使用系统默认。
英文字体和数字字体可使用 Helvetica ，三种系统都支持。
OK，证据确凿。如果设计师需要用到一些特殊的英文字体，比如漂亮的din1451a，akzidenzgrotesk-cond等，我们需要转换下，然后用@font-face引用下即可，这个方法不多说，so easy
关于字体设置(font-family)的问题，就聊这么多吧。下一个问题：CSS字体粗细(font-weight)。
首先我们了解下font-weight的基本属性值，如下表格：
400等同于normal，而700等同于bold。
inherit规定应该从父元素继承字体的粗细。
不过感觉效果不明显。只能换个字体试试。不过比较常见的中文字体里，感觉黑体比较粗些吧。我们看个简单的例子，WINDOWS系统PC端效果：
可以根据值的设置，可以轻松搞定字体的粗细。细心的童鞋发现，如果设置font-weight:901会怎样，设置font-weight:99又会是啥效果，哈哈 _ ，我不说，您可以去尝试。公司穷，不给配置高大上的设备，至于其他系统下的PC加粗效果，大家可以去测试下，我要说的重点是在移动端。
如果你对安卓和IOS前期的版本有了解的话，发现它们对于字体加粗属性很乱，支持性不太好，无论你怎么设置都无效，说白了就是系统BUG，这里就不讨论那些老掉牙的问题了，我们是要先前看， _ 。
CSS字体设置(font-family)和粗细(font-weight)在不同设备和系统下的差别，会给前端工程师在开发项目时带来一些不便，尤其是在移动端，比如我想用一个特殊字符：五角星，箭头，圆点，箭头等等，用字体直接去设置效果，最终出来的效果出来不尽人意，这个大家可以去测试下便知，代替方法就是用CSS3、图和base64等。
OK，大概就这么多，希望能帮助到大家吧。
css中的font-family你真的用对了么
从 MDN 上可以看到，当元素的一个继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值（computed value）。
比如 color 属性就是继承属性，给父级元素设置了 color ，则子元素会继承。
CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性 font-family 列举一个或多个由逗号隔开的字体族，语法如下：
font-family 是一个继承属性，比如，我在child元素的父元素.parent 上添加 font-family: serif; ，子元素也会继承它的属性值。
但是，我们给子元素的 font-family 随便设置一个值 unknow，这实际上是一个无效的字体。
浏览器识别不出来这是一个无效的值，计算值的结果还是 unknown，但实际效果则是直接降级到浏览器的默认值。此时并不会即成父级元素设置的值，这跟我们的认知还是不一样的。
然而，假如我们设置子元素的样式如下，即在 test 之后再设置一个字体 Gill Sans ，
就会降级到 Gill Sans 了。
我们通常会在全局样式中设置通用字体，以保证字体样式在不同设备上呈现时，至少有一个最基本的字体样式可以降级，而不是直接降级为系统默认字体。
但是当我们为某些特定元素设置字体样式时，比如设计希望在苹果设备上呈现出 PingFang SC 字体样式。如果理所当然的设定为，
那么会覆盖全局设置的通用字体样式，而如果该设备上没有苹方字体时，就会降级到系统默认字体，而不是设置的全局通用字体。
因此当UI有特殊字体样式要求时，请务必在设置字体样式时，除了特殊字体的声明，也要保证在特殊字体后边添加用于降级的通用字体，比如：
否则当用户在系统上设置了奇怪的默认字体时，您的UI设计稿就会也随之变得奇奇怪怪。
为什么在css中设置了font-family:" 微软雅黑"没有用？
原因：
1、本地计算机不存在微软雅黑字体，有的系统默认没有微软雅黑，则一般默认为宋体，只要下载一个微软雅黑字体，安装后即可。
2、还有一个是字符集问题，建议把中文font-family:” 微软雅黑”;改为font-family: “Microsoft YaHei”;字符集申明一下UTF-8或GB2312。
解决：
需要再次定义如：?
body {font-family: “Microsoft YaHei”;}对表单input就不生效，?还需要定义一个input {font-family: “Microsoft YaHei”;}才可以。
拓展：
宋体：SimSuncss中中文字体（font-family）的英文名称
Mac?OS的一些：
华文细黑：STHeiti?Light?[STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
俪黑?Pro：LiHei?Pro?Medium
俪宋?Pro：LiSong?Pro?Light
标楷体：BiauKai
苹果俪中黑：Apple?LiGothic?Medium
苹果俪细宋：Apple?LiSung?Light
