網頁的字體呈現和使用者的電腦中的字型有關。如果設計者的電腦有黑體,則設定好了以後,看到都正常的。但是到了一個沒有指定字體的電腦上,就會使用該電腦(瀏覽器)的預設字型呈現,而畫面就會變得和設計者當初所用的不同了。

為了避免這樣的現象出現,因此通常都會在 css 的 font-family 的屬性中設定多種指定替代字型,盡可能達到不管在什麼樣的電腦中,看到的盡可能都依樣。
以下,就是一般的設定,在mac或windows電腦中都可以看到以黑體呈現的設定值。

body{
  font-family:'Helvetica Neue', 'Helvetica', 'Arial', '微軟正黑體', 'sans-serif';
}

但是,這樣的設定有時候還是會有意外,因此,最保險的方式,就是引入google的「思源黑體」,這樣所有人看到的都會是一樣的。只是,這種做法的缺點就是有引入檔案的會拖慢網頁載入的速度,這時候就是設計者需要取捨之處囉!
以下,就是引用google字型的設定。

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body {
	font-family: ‘Noto Sans TC’, '微軟正黑體', 'SimHei', 'sans-serif', 'serif';
}

上面這一段,保險起見,後面的替代自行還是加入了「微軟正黑體」。

其他如果要引入如:圓體、仿宋體作法如下:

/*仿宋體*/
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
body {
	font-family: ‘cwTeXFangSong’;
}
/*圓體*/
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
body {
	font-family: ‘cwTeXYen’, sans-serif;;
}

就把自己搜到的資料記錄起來,以後需要用的時候可以參考囉!
參考網站如下: