font-face 總結

sPeng 發布于2019-08-29 12:55 / 962人閱讀

摘要：說到，第一反應就會想到圖標，就會想到阿里的平臺，平臺有一個編輯功能特別好用，你可以在原先的圖標上進行位移放大縮小旋轉等其實操作的步驟是平臺有一個編輯功能特別好用，你可以在原先的圖標上進行位移放大縮小旋轉等如果我們手里有一些圖標，想轉換為的

說到font-face，第一反應就會想到圖標，就會想到阿里的iconfont平臺，http://www.iconfont.cn/

iconfot平臺有一個編輯功能特別好用，你可以在原先的圖標上進行位移、放大縮小、旋轉等
其實操作的步驟是：

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

由于各瀏覽器對font-face字體格式的兼容性問題，所以有時候會需要準備多個格式的不同的字體文件

@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圖像放大后，不會失真：字體是矢量的，圖像是基于像素的
iconfont節省流量：在圖片清晰度高情況下，圖片的大小就越大，iconfont顏色由css決定，尺寸要求變大的話，則適應性的變大
iconfont在顏色變幻方面很簡單:如果是用圖片的話，hover時如果需要變色則需要更換另外一張圖片，使用iconfont則只需要更換color就可以了
使用iconfont不足之處：只能支持單色圖標；

其實font-face最本質的用處是變量

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

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

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

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

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

于是我們使用時就可以這樣，這對于多處使用節省了多少代碼容量

body {
    font-family: BASE;
}

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

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

說一下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字體時，如果font-style聲明的是normal就會使用方正姚體，如果font-style聲明的是斜體的話就會使用方正舒體
font-face中的font-weight與font-style使用同理
最有趣的當屬unicode-range，一般情況下我們用微軟雅黑字體時，引號顯示的都會很突兀

這時候unicode-range就派上用場了

@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;
}

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112235.html

前端引用字體@font-face的若干優化方法

摘要：前言場景我們在頁面展示時，為了更好的效果，一般使用了自定義的字體。之前在開發的時候使用了一些自定義字體，這里總結下自己尋找的的一些處理辦法。本文只列出了引入本地字體，網絡的字體由于實踐不多，這里介紹就少一些。 1 前言 1.1 場景我們在頁面展示時，為了更好的效果，一般使用了自定義的字體 @fant-face 。之前在開發的時候使用了一些自定義字體，這里總結下自己尋找的的一些處...

AdolphLWQ 2019-08-26 13:53 評論0 收藏0
前端引用字體@font-face的若干優化方法

摘要：前言場景我們在頁面展示時，為了更好的效果，一般使用了自定義的字體。之前在開發的時候使用了一些自定義字體，這里總結下自己尋找的的一些處理辦法。本文只列出了引入本地字體，網絡的字體由于實踐不多，這里介紹就少一些。 1 前言 1.1 場景我們在頁面展示時，為了更好的效果，一般使用了自定義的字體 @fant-face 。之前在開發的時候使用了一些自定義字體，這里總結下自己尋找的的一些處...

binta 2019-08-30 10:58 評論0 收藏0
iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0
使用 @font-face

摘要：允許我們在網頁里使用在線字體顯示文字。不使用這個命令的話，網頁可用的字體會受限于本地計算機的字體，同時非常依賴正在使用的操作系統。大小對比以我目前使用的為例，，，，，。 @font-face允許我們在網頁里使用在線字體顯示文字。把它寫到css中以后，瀏覽器就會根據其中指明的地址下載對應的字體，然后按照css中的樣式來顯示字體。不使用這個命令的話，網頁可用的字體會受限于本地計算機的字體...

mdluo 2019-08-29 11:15 評論0 收藏0
關于使用WeUI在IE中提示“font-face 未能完成 OpenType 嵌入權限檢查。權限必須

摘要：是中定義字體的規則。首先，在使用時，在下沒有問題，但是在下提示未能完成嵌入權限檢查。訪問，將編碼轉換為文件，這里命名為。保存并瀏覽器刷新后，中不再提示錯誤。@font-face是css3中定義字體的規則。首先，在使用weui時，在Chrome、Firefox下沒有問題，但是在IE下提示“font-face 未能完成 OpenType 嵌入權限檢查。權限必須是可安裝的&rdquo...

番茄西紅柿 2019-04-23 13:28 評論0 收藏0