web页面font-family显示

font-family属性很简单，直接写在css或style样式中即可。

如： font-family: "Microsoft YaHei";

但是如果希望电脑能正确的显示我们设置的字体，必须电脑上已经安装了次此种字体，否则就没法正常显示。

我的解决方法有两种：

1、下载字体，然后引用(和引用JavaScript文件类似)

首先下载所需要的字体

然后，引用字体：

(方法)

@font-face {font-family: 'webfont';
    src: url('webfont.eot'); /* IE9*/
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

(例) [我引用的是在线的字体(思源黑体：http://iconfont.cn/webfont/#!/webfont/index )]

@font-face {font-family: 'webfont';
  src: url('//at.alicdn.com/t/rgtsrf4036m9529.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/rgtsrf4036m9529.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/rgtsrf4036m9529.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/rgtsrf4036m9529.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/rgtsrf4036m9529.svg#NotoSansHans-Black') format('svg'); /* iOS 4.1- */
}

可以查看：https://www.zybuluo.com/cherishpeace/note/46809 具体了解。

然后就可以直接设置字体font-family的属性了。

2、用电脑上已有该字体的族类字体代替(如：设置字体为“微软雅黑”，但是用户电脑上没有此种字体，可以用其他的黑体来代替“微软雅黑”)

电脑本身都自带了很多字体，不是每种字体都有，但差不多每个种类的字体都有；

我们可以用同族类的字体代替

如：

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

h1：显示 arial字体；若电脑上没有arial字体，则显示verdana字体；若还是没有，电脑则从字体库中找sans-serif族类的第一个显示。

h2：显示新罗马字体，若没有则显示serif族类的第一个字体。

可以查看：http://zh.html.net/tutorials/css/lesson4.php 具体了解

-----

第一种方法可以保证web中字体样式正确性

第二种方法是调用电脑本身自带的字体库，用户在浏览页面的时候更加流畅