CSS添加本地字體


項目中用到了集成商的硬件,安卓系統,通過套殼瀏覽器來展示一個頁面。
其中一個需求是一段標題文字用宋體展示,很普通,對吧。

在本地用chrome調試時毫無問題,但是這個設備展示時,一直是黑體。
於是嘗試直接用設備自帶的瀏覽器打開,果不其然,還是展示黑體。

我們的手機肯定是有宋體的,懷疑是這個硬件精簡掉了宋體(或者原生安卓本來就不帶宋體?)。
於是想到了通過css的font-face來加載本地字體。

下載了simsun.ttf,提供下面這段代碼,測試發現無效:

@font-face {
	font-family: 'SimSun';
	src: url('simsun.ttf')  format('truetype'), /* Safari, Android, iOS */
  }

查看瀏覽器的network欄,發現也沒有字體下載的動作。。。

幾乎要放棄的時候,找到了這篇文章(引入font-face不管用

其實之前也搜到一些內容,說是IE要使用eot格式字體才行,但是找了很久,就連宋體這種字體,都搜到了ttf格式,而沒有搜到eot格式。
這篇文章首先給出了生效的css,然后還給出了https://www.fontke.com/tool/fontface/這個網站,能幫忙將ttf轉化成各種我需要的字體。
通過這個網站,生成了這幾種字體:ttf,eot,woff,woff2,svg

最終生效的css如下:

@charset "UTF-8";

@font-face {
  font-family: "simsun-my";
  src: url("simsun.eot"); /* IE9 */
  src: url("simsun.woff2") format("woff2"),
       url("simsun.woff") format("woff"),
       url("simsun.ttf") format("truetype"),
       url("simsun.eot") format("embedded-opentype"),
       url("simsun.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

其實無法得知最終在硬件上其效果的是哪一句,但是最終效果生效,而以上寫法應該也是確保兼容性的一種寫法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM