web頁面font-family顯示

font-family屬性很簡單，直接寫在css或style樣式中便可。

    如： font-family: "Microsoft YaHei";

可是若是但願電腦能正確的顯示咱們設置的字體，必須電腦上已經安裝了次此種字體，不然就無法正常顯示。

個人解決方法有兩種：

一、下載字體，而後引用(和引用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的屬性了。

 

二、用電腦上已有該字體的族類字體代替(如：設置字體爲「微軟雅黑」，可是用戶電腦上沒有此種字體，能夠用其餘的黑體來代替「微軟雅黑」)

電腦自己都自帶了不少字體，不是每種字體都有，但差很少每一個種類的字體都有；

咱們能夠用同族類的字體代替

如：

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

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