您現在的位置: 365建站網 > 365學習 > CSS3嵌入字體@font-face調用字體(思源宋體regula/PingFang SC/ttf/woff)

CSS3嵌入字體@font-face調用字體(思源宋體regula/PingFang SC/ttf/woff)

文章來源:365jz.com     點擊數:3420    更新時間:2019-12-04 15:29   參與評論

@font-face可以實現從服務器端加載字體,所有瀏覽器中使用的字體就可以不受本地字體的限制。@font-face真的不是什么新鮮玩意,早在2001年時就被提出來,只不過近兩年才被各瀏覽器廣泛支持。而且各瀏覽器支持的字體文件格式也可能不同,一般來說如下四種格式可覆蓋所有瀏覽器。

eot:該格式僅在老版本的IE中使用

ttf:(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字體文件格式,隨著windows的流行,已經變成最常用的一種字體文件表示方式,支持的瀏覽器很多。

svg:(Scalable Vector Graphics)該字體可能最早在IOS設備上被支持,沒有ttf格式使用的廣泛。

woff:(Web Open Font Format)是一種網頁所采用的字體格式標準。此字體格式發展于2009年,現在正由w3c標準化,以求成為web字體的統一標準。

 

如何使用自定義字體?

第一步,在CSS中引入字體并給名字取一個合適的名字,如下:

 

@font-face {
/* font-test*/
font-family: tonjay;
src:url('font/tonjay-web.woff'),
url('font/tonjay-web.ttf'),
url('font/tonjay-web.eot'); /* IE9 */
}

font-family定義字體的名字,接下來的src是加載字體文件的位置,之所有有多個url就是因為瀏覽器兼容問題。

第二步,使用剛剛定義的字體,如下:

div {
font-family: tonjay;
}

附@font-face的瀏覽器字體兼容性

Webkit/Safari(3.2+):TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);

Opera (10+): TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);

Internet Explorer: 自ie4開始,支持EOT格式的字體文件;ie9支持WOFF;

Firefox(3.5+): TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)

Google Chrome:TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有瀏覽器的完美支持。


另外一種方法:

1.下載SourceHanSansCN-Regular.TTF

https://www.fontke.com/font/18839412/download/

2.解壓得到左邊文件

3.找到在線font-face生成器

https://www.fontke.com/tool/fontface/

根據提示上傳 SourceHanSansCN-Regular.TTF

可以得到以下文件:

4.引入項目

在需要的地方引入 .css 文件;

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (3420人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 色窝窝色蝌蚪在线视频网站免费看| 欧美日韩一区精品视频一区二区| 纵情秘史| 岛国精品一区免费视频在线| 新91国产在线精品亚洲| 男女做暧暧18禁止试看| 情欲小说| 日本xxxx色视频在线观看免费| 老师把腿扒开让你桶个够| 11俄罗斯tee| 香港日本三级在线播放| piss厕所撒尿1wc女厕所| henhenlu| 久久久久精品精品6精品精品| 日本做人爱c视频正| 看全色黄大色大片免费久久| 快播乱伦| 紧致挺入蘑菇头| wwwyoujizzcom| 艳妇乳肉豪妇荡乳后续| 成人三级视频在线观看不卡| 天天影院| 婷婷六月综合缴情在线| 熟妇的荡欲免费a片| 18禁勿入网站入口永久| 小东西好紧水都流出来了| 婷婷六月综合缴情在线| 免费国产黄网站在线观看| 男人j放进女人的p视频亚洲| 生肉动漫免费观看| 欧洲美女开放牲交视频| http://www.bestpopmkt.com