font-face 總結(jié)

sPeng 發(fā)布于2019-08-29 12:55 / 958人閱讀

摘要：說(shuō)到，第一反應(yīng)就會(huì)想到圖標(biāo)，就會(huì)想到阿里的平臺(tái)，平臺(tái)有一個(gè)編輯功能特別好用，你可以在原先的圖標(biāo)上進(jìn)行位移放大縮小旋轉(zhuǎn)等其實(shí)操作的步驟是平臺(tái)有一個(gè)編輯功能特別好用，你可以在原先的圖標(biāo)上進(jìn)行位移放大縮小旋轉(zhuǎn)等如果我們手里有一些圖標(biāo)，想轉(zhuǎn)換為的

說(shuō)到font-face，第一反應(yīng)就會(huì)想到圖標(biāo)，就會(huì)想到阿里的iconfont平臺(tái)，http://www.iconfont.cn/

iconfot平臺(tái)有一個(gè)編輯功能特別好用，你可以在原先的圖標(biāo)上進(jìn)行位移、放大縮小、旋轉(zhuǎn)等
其實(shí)操作的步驟是：

iconfot平臺(tái)有一個(gè)編輯功能特別好用，你可以在原先的圖標(biāo)上進(jìn)行位移、放大縮小、旋轉(zhuǎn)等
如果我們手里有一些圖標(biāo)，想轉(zhuǎn)換為iconfont的話，可以直接使在線工具轉(zhuǎn)換：
http://image.online-convert.c...

由于各瀏覽器對(duì)font-face字體格式的兼容性問(wèn)題，所以有時(shí)候會(huì)需要準(zhǔn)備多個(gè)格式的不同的字體文件

@font-face {
    font-family: "icons";
    src: url(../font/curiconfont.eot#iefix) format("embedded-opentype"),
         url(../font/curiconfont.woff) format("woff"),
         url(../font/curiconfont.ttf) format("truetype"),
         url(../font/curiconfont.svg?#iconfont) format("svg");
    font-weight: normal;
    font-style: normal;
}

瀏覽器支持的字體格式如下所示：
IE瀏覽器-->EOT
Mozilla瀏覽器-->OTF，TTF
Safari瀏覽器-->OTF，TTF??，SVG
Opera-->OTF，TTF??，SVG
Chrome瀏覽器-->TTF，SVG
使用iconfont的好處如下所示：
iconfont圖像放大后，不會(huì)失真：字體是矢量的，圖像是基于像素的
iconfont節(jié)省流量：在圖片清晰度高情況下，圖片的大小就越大，iconfont顏色由css決定，尺寸要求變大的話，則適應(yīng)性的變大
iconfont在顏色變幻方面很簡(jiǎn)單:如果是用圖片的話，hover時(shí)如果需要變色則需要更換另外一張圖片，使用iconfont則只需要更換color就可以了
使用iconfont不足之處：只能支持單色圖標(biāo)；

其實(shí)font-face最本質(zhì)的用處是變量

使用如下代碼就可以聲明使用微軟雅黑事實(shí)上顯示的是宋體

`@font-face {
font-family: "Microsoft Yahei";
src: local(SimSun);
}`
一般情況下我們聲明一個(gè)頁(yè)面上的字體會(huì)這樣子寫(xiě)：

body {
    font-family: PingFangSC-Regular,HelveticaNeue-Light,"Helvetica Neue Light","Microsoft YaHei",sans-serif;
}

事實(shí)上我們可以利用font-face是變量的這一特性，可這如下聲明：

@font-face {
  font-family: BASE;
  src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local("Microsoft YaHei"), local(sans-serif);
}

于是我們使用時(shí)就可以這樣，這對(duì)于多處使用節(jié)省了多少代碼容量

body {
    font-family: BASE;
}

有的情況下，我想讓網(wǎng)頁(yè)上某一部分字變成自己想要的字體，像如下聲明就表示如果用戶安裝了“方正粗雅宋”就沒(méi)用任何字體請(qǐng)求，看出local的重要性了吧

@font-face {
  font-family: FZCYS;
  src: local("FZYaSongS-B-GB"), 
       url("FZCYS.woff2"),  
       url("FZCYS.woff"),
       url("FZCYS.ttf");
}

說(shuō)一下font-face中font-style的妙用吧

@font-face {
  font-family: "I";
  font-style: normal;
  src: local("FZYaoti");
}
@font-face {
  font-family: "I";
  font-style: italic;
  src: local("FZShuTi");
}

在使用I字體時(shí)，如果font-style聲明的是normal就會(huì)使用方正姚體，如果font-style聲明的是斜體的話就會(huì)使用方正舒體
font-face中的font-weight與font-style使用同理
最有趣的當(dāng)屬u(mài)nicode-range，一般情況下我們用微軟雅黑字體時(shí)，引號(hào)顯示的都會(huì)很突兀

這時(shí)候unicode-range就派上用場(chǎng)了

@font-face {
  font-family: BASE;
  src: local("Microsoft Yahei");
}
@font-face {
  font-family: quote;
  src: local("SimSun");    
  unicode-range: U+201c, U+201d;
}
.font {
    font-family: quote, BASE;
}

使用如上代碼就會(huì)變成我們想要的舒服樣子

最后附上文章的參考文獻(xiàn)：
真正了解CSS3背景下的@font face規(guī)則
[聊一聊系列]聊一聊iconfont那些事兒