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中字體樣式正確性

第二種方法是調用電腦本身自帶的字體庫，用戶在瀏覽頁面的時候更加流暢