使用 @font-face

mdluo 發布于2019-08-29 11:15 / 1737人閱讀

摘要：允許我們在網頁里使用在線字體顯示文字。不使用這個命令的話，網頁可用的字體會受限于本地計算機的字體，同時非常依賴正在使用的操作系統。大小對比以我目前使用的為例，，，，，。

@font-face允許我們在網頁里使用在線字體顯示文字。把它寫到css中以后，瀏覽器就會根據其中指明的地址下載對應的字體，然后按照css中的樣式來顯示字體。

不使用這個命令的話，網頁可用的字體會受限于本地計算機的字體，同時非常依賴正在使用的操作系統。也就是說，我們在css指定一個字體，想要顯示出來的話，本地計算機要有這個字體才行，而且同樣的字體棧，在不同的操作系統下，默認的字體也不一樣。╮(╯▽╰)╭

示例



  Web Font Sample
  


  This is Bitstream Vera Serif Bold.

詳解

@font-face {
  font-family: "字體名稱";
  src: 字體鏈接;
  font-variant: 字體變型，默認normal;
  font-stretch: 字體拉伸，默認normal;
  font-weight: 字體粗細，默認normal;
  font-style: 字體樣式，默認normal;
  unicode-range: 字體Unicode字符范圍，默認U+0-10FFFF;
}

最大支持

這個寫法就是當前能支持瀏覽器最多的了，同時應該保證把@font-face寫在所有css的最頂端。

@font-face {
  font-family: "MyWebFont";
  src: url("webfont.eot"); /* IE9 Compat Modes */
  src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
       url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
       url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

Chrome：4.0+

Safari：3.1+

Firefox：3.5+

Opera：10.0+

IE：4.0+

Android：yes

iOS：yes

適合大多數情況的支持

@font-face {
  font-family: "MyWebFont";
  src:  url("myfont.woff2") format("woff2"),
        url("myfont.woff") format("woff");
}

這里只添加了woff和woff2，但是已經可以支持大多數瀏覽器版本了，詳情如下：

Chrome：5+

Safari：5.1+

Firefox：3.6+

Opera：11.50+

IE：9+

Android：4.4+

iOS：5.1+

更加保守的支持

@font-face {
  font-family: "MyWebFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff"),
       url("myfont.ttf") format("truetype");
}

添加了.ttf字體，這樣基本已經可以涵蓋絕大多數瀏覽器了，詳情如下：

Chrome：3.5+

Safari：3+

Firefox：3.5+

Opera：10.1+

IE：9+

Android：2.2+

iOS：4.3+

更加激進的支持

@font-face {
  font-family: "MyWebFont";
  src: url("myfont.woff2") format("woff2");
}

可以預期總有一天所有瀏覽器都會支持woff2，它目前的支持情況如下：

Chrome：36+

Safari：no

Firefox：35+ with flag

Opera：23

IE：no

Android：37

iOS：no

另一種技術 @import

當字體存在于我們自己服務器上的時候，使用@font-face無疑是非常棒的選擇，但是對于引用其他服務器字體，我們還有其他的辦法，就像下面這樣：

@import url(//fonts.googleapis.com/css?family=Open+Sans);

在css里的使用方法也是一樣

body {
  font-family: "Open Sans", sans-serif;
}

如果打開這個鏈接，就會發現背后還是@font-face在起作用。

使用字體托管服務的好處有很多，除了CDN的好處之外，它能保持極高的跨瀏覽器字體兼容性，而無需自己去維護。想想上面那個最大兼容（而且一套字體可能會存在不同的文件對應不同的unicode區間，文件數直接翻倍），簡直不寒而栗啊。

字體文件簡介 WOFF / WOFF2

代表：Web Open Font Format.

沒有錯，這就是專門為網絡使用而創造的字體，相較于其它字體，woff的體積更小，更加適合網絡傳輸。

woff2是下一代的woff，有比woff更大的壓縮比。

SVG / SVGZ

代表：Scalable Vector Graphics (Font)

SVG是一種矢量字體，也就是說放大到多少都沒問題，而且手機瀏覽器對它的支持也很好。

SVGZ是SVG的壓縮版。

EOT

代表：Embedded Open Type.

這是由微軟創造出來的字體，目前也只有IE支持，但是如果想在IE4-IE8中使用@font-face的話，就得把它加進去。

OTF / TTF

代表：OpenType Font and TrueType Font.

兩個很古老，也很有有淵源的字體，據說woff最初的格式就是從這兩個字體中來的。

大小對比

以我目前使用的MarckScriptLatin為例：

svg：130KB，
otf：70KB，
ttf：31KB，
eot：31KB，
woff：18KB，
woff2：14KB。

可以看出woff2相當具有優勢。

其它

閑著沒事折騰下，其實也是想讓自己的網頁更好看一些，所謂愛美之心人皆有之。

看到@font-face的支持情況，IE4就支持了，所以說這應該是個相當古老的命令了，而我還以為是css3帶出來的，真實太后知后覺了。

有前端的地方就有優化，@fant-face也是這樣的，雖然網頁設計上來說更好了，但是也要明白，瀏覽器要加載這些字體，也是要先下載到本地的，而一個字體文件通常不會很小（例如上面的例子，即使woff2也有14KB）。

而優化的方案，也有很多。

參考

https://css-tricks.com/snippe...
https://developer.mozilla.org...

GPU云服務器云服務器 font-face https使用oos使用本地怎么使用使用云服務器阿里云服務器虛擬主機使用使用

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

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

font-face 總結

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

sPeng 2019-08-29 12:55 評論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
博客引入漂亮字體二三事

摘要：火狐推遲對字體的支持，重點放在格式上。網絡字體的效率字體文件的體積可能非常的大尤其是對于漢字，而且需要額外的連接，這些都會降低網站頁面的加載速度。最近興致上來，就想更換了那Blog標題字體(漢字的)；網上搜索了一番，發現蘇新詩柳繁體這款甚合我心；然后就著手搞將了起來，分分鐘也算是替換了；但，這僅僅是此次折騰的開始；這就細細道來作為學習筆記記載。原文首發鏈接http://www.je...

Pocher 2019-08-19 17:37 評論0 收藏0
博客引入漂亮字體二三事

摘要：火狐推遲對字體的支持，重點放在格式上。網絡字體的效率字體文件的體積可能非常的大尤其是對于漢字，而且需要額外的連接，這些都會降低網站頁面的加載速度。最近興致上來，就想更換了那Blog標題字體(漢字的)；網上搜索了一番，發現蘇新詩柳繁體這款甚合我心；然后就著手搞將了起來，分分鐘也算是替換了；但，這僅僅是此次折騰的開始；這就細細道來作為學習筆記記載。原文首發鏈接http://www.je...

Michael_Lin 2019-08-30 12:47 評論0 收藏0
CSS3 font-face使用

摘要：在之前，設計師必須使用已在用戶計算機上安裝好的字體。當您找到或購買到希望使用的字體時，可將該字體文件存放到服務器上，它會在需要時被自動下載到用戶的計算機上。您自己的的字體是在規則中定義的。在 CSS3 之前，web 設計師必須使用已在用戶計算機上安裝好的字體。通過 CSS3，web 設計師可以使用他們喜歡的任意字體。當您找到或購買到希望使用的字體時，可將該字體文件存放到 web 服務器上，它...

番茄西紅柿 2019-04-23 11:50 評論0 收藏0