天天看點
傳回

RF1001: 各浏覽器對 '@font-face' 規則支援的字型格式不同，IE 支援 EOT 字型，Firefox Safari Opera 支援 TrueType 等字型...

http://w3help.org/zh-cn/causes/RF1001

 http://blog.csdn.net/agileclipse/article/details/12450949 

http://www.zhaozi.cn/html/fonts/  字型網

作者：陸遠

标準參考

根據 CSS3 草案中的描述，'@font-face' 規則允許使用連結到需要時自動激活的字型。這使得使用者可以使用線上的字型，而不僅僅拘泥于使用使用者端系統内的字型。一套對字型的描述定義了字型資源的位置，可以是本地也可以是其他地方，以及自定義個性化字型風格。

規則定義格式：

@font-face {
    descriptor: value;
    descriptor: value;
    [...]
    descriptor: value;
}

如：

@font-face {
    font-family: Gentium;
    src: url(http://site/fonts/Gentium.ttf);
}

p { font-family: Gentium, serif; }

字型引用：src 描述

名稱
src
值
[ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]*
初始值
N/A

此描述指定了資源中包含的字型資料。無論字型是下載下傳的或者是本地安裝的，這個描述都是必需的，以逗号作為分隔的外部引用或本地安裝的字型名稱的清單中各值的優先級依次遞減。當遇到不合理的資料則被當作未找到字型處理。 外部引用包含一個 URI，後面有一個可選的 format 參數可以提示該資源 URI 所引用的字型格式，format 與 URI 之間通過逗号分隔。 如：

src: url(../fonts/LateefRegAAT.ttf) format("truetype-aat"), url(../fonts/LateefRegOT.ttf) format("opentype");

初步定義的格式字元串清單：

String Font Format Common extensions
truetype TrueType .ttf
opentype OpenType .ttf, .oft
truetype-aat TrueType with Apple Advanced Typography extensions .ttf
embedded-opentype Embedded OpenType .eot
svg SVG Font .svg, .svgz

關于 @font-face rule 的詳細資料，請參考 CSS Fonts Module Level 3 草案 4.1 The @font-face rule 中的内容。

關于 src descriptor 的詳細資料，請參考 CSS Fonts Module Level 3 草案 4.3 Font reference: the 'src' descriptor 中的内容。

問題描述

各浏覽器對 '@font-face' 規則支援的字型格式不同，IE 僅支援 Embedded OpenType，Firefox 支援 TrueType、OpenType 及 WOFF，Chrome、Safari、Opera 則支援 TrueType、OpenType、SVG Font。

造成的影響

若在使用 '@font-face' 規則時僅僅考慮一種字型格式，則可能在某些浏覽器中無法應用規則所引入的字型。

受影響的浏覽器

IE6 僅支援 Embedded OpenType(.eot) 格式。
IE7 僅支援 Embedded OpenType(.eot) 格式。
IE8 僅支援 Embedded OpenType(.eot) 格式。
Firefox 3.5 支援 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6 支援 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome 支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Safari 支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Opera 支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

問題分析

'@font-face' 規則首先定義在 CSS2 規範中，但是在 CSS2.1 中被删除，目前又被納入到 CSS3 推薦草案中。at-rule（@）包含一條或多條被稱作 font descriptor （字型描述）的特性聲明，與那些在正常的 CSS 規則中的類似。由于 '@font-face' 規則沒有被納入到目前應用最廣泛的 CSS2.1 規範中，各浏覽器雖然對此規則均支援，但支援的細節有所差別。

IE 從 4.0 開始支援 '@font-face' ，使用了 Embedded OpenType (EOT) 格式。借助微軟官方提供的字型壓縮工具 'Microsoft WEFT(Web Embedding Fonts Tool)' 可以将 OpenType TT(.ttf) 格式的字型壓縮至較小的體積，壓縮後的類型即 .eot 格式。.eot 格式的字型僅被 IE 所支援。而到目前正式釋出的最新版本的 IE8 也仍然僅支援 .eot 格式的字型。

IE 同樣不支援 '@font-face' 規則中 src 描述中使用 format 提示所引用字型檔案的格式。這将導緻 '@font-face' 規則認為 src 描述定義錯誤而失效。

在網際網路上随機找到一個 TrueType 字型 'Cherl'，通過 'Microsoft WEFT' 将 'Cherl' 字型檔案轉換為 .eot 格式。或者通過開源的轉換工具 'ttf2eot' 進行字型格式轉換。

接下來就可以在 IE 中以類似 CSS3 草案中提到的格式定義 '@font-face' 規則。如：

<style>
    @font-face {
        font-family: Cherl;
        src: url(cherl.eot);
    }
</style>

這時就可以通過為聲明設定 

font-family: Cherl

 來應用自定義的字型。

更多資料參考：

  • http://www.w3.org/Submission/EOT/
  • http://en.wikipedia.org/wiki/Embedded_OpenType
  • http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx

從 Firefox 3.5 Chrome 3.0 Safari 3.1 Opera 10 開始，其他非 IE 的主流浏覽器均提供了對 '@font-face' 規則的支援。相比 IE 中所支援的微軟私有的 .eot 格式，這些浏覽器則提供了對使用範圍更廣泛、更常見的 TrueType 與 OpenType 格式的支援。

'@font-face' 規則的定義格式與 IE 中類似，但是支援 CSS3 草案中所描述的 format 提示參數等。

<style>
    @font-face {
        font-family: Cherl;
        src: url(cherl.ttf);
    }
</style>

更多資料參考：

  • https://developer.mozilla.org/en/css/@font-face
  • http://developer.apple.com/safari/library/documentation/appleapplications/reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW2
  • http://my.opera.com/ODIN/blog/font-face-web-fonts-resources

非 IE 浏覽器對其他一些字型格式的支援

Chrome Safari Opera 在 TrueType 與 OpenType 字型格式之外，還支援 SVG 字型。通過 SVG 中的 FONT 元素及其他相關元素可以在 SVG 檔案中定義字型。如：

<!doctype html>
<html>
<head>
<style>
  @font-face {
    font-family: ubuntu;
    src: url(UbuntuTitleBold.svg#UbuntuTitleBold) format("svg");
  }
  #webfont {
    font: 24px/150% ubuntu;
    width: 300px;
  }
</style>
</head>
<body>
  <div id="webfont">The quick brown jumps over the lazy dog. 1234567890</div>
</body>
</html>

SVG 字型範例：UbuntuTitleBold.svg

目前 IE 和 Firefox 尚不支援此格式，在 Chrome Safari Opera 中效果如下：

RF1001: 各浏覽器對 '@font-face' 規則支援的字型格式不同，IE 支援 EOT 字型，Firefox Safari Opera 支援 TrueType 等字型...

SVG 字型轉換：http://xmlgraphics.apache.org/batik/tools/font-converter.html

更多資料參考：

  • http://www.w3.org/TR/2010/WD-SVG11-20100622/fonts.html

此外，Firefox 3.6 開始，又增加了一種字型格式支援 —— WOFF（Web Open Font Format，開放式字型規範）。WOFF 由字型設計師 Erik van Blockland、Tal Leming 和 Mozilla 的 Jonathan Kew 主持設計，可以看作是 TrueType、OpenType 字型資料的簡單重新封裝，不過内建了壓縮功能，因而體積更小、友善下載下傳和傳播。另外還支援中繼資料，是以廠商可以在他們的字型中加入相關識别資訊。

WOFF 字型轉換：http://people.mozilla.com/~jkew/woff/

更多資料參考：

  • https://developer.mozilla.org/en/About_WOFF
  • http://people.mozilla.com/~jkew/woff/woff-spec-latest.html

多種字型格式轉換：http://www.fontsquirrel.com/fontface/generator

下面清單檢視各浏覽器對各種 Web 字型的支援情況：

IE6 IE7 IE8 Firefox 3.5+ Firefox 3.6+ Chrome Safari Opera
TrueType, OpenType 不支援 支援 支援 支援 支援 支援
Embedded OpenType 支援 不支援 不支援 不支援 不支援 不支援
SVG Font 不支援 不支援 不支援 支援 支援 支援
WOFF 不支援 不支援 支援 不支援 不支援 不支援

解決方案

由于各浏覽器對 '@font-face' 規則字型格式支援存在差異，若僅通過定義一個 '@font-face' 規則，可以通過 CSS hack 的方式在 IE、Firefox、Chrome、Safari、Opera 中得到相同的字型效果。

參考代碼如下：

<!doctype html>
<html>
<head>
<style>
  @font-face {
    font-family: Cherl;
    src: url(cherl.ttf);
    src: url(cherl.eot)\9;
  }
  #webfont {
    font: 24px/150% Cherl;
    width: 300px;
  }
</style>
</head>
<body>
  <div id="webfont">The quick brown jumps over the lazy dog. 1234567890</div>
</body>
</html>

上面代碼在各浏覽器中的效果均為：

RF1001: 各浏覽器對 '@font-face' 規則支援的字型格式不同，IE 支援 EOT 字型，Firefox Safari Opera 支援 TrueType 等字型...
RF1001: 各浏覽器對 '@font-face' 規則支援的字型格式不同，IE 支援 EOT 字型，Firefox Safari Opera 支援 TrueType 等字型...

同時，Google 提供了一種建立線上字型（WebFont）的方式：http://code.google.com/intl/zh-CN/apis/webfonts/ 利用 Google 提供的 API，可以在任何頁面中加入 WebFont，同時支援各種主流浏覽器。

參見

知識庫

  • ...

相關問題

  • ...

測試環境

作業系統版本: Windows 7 Ultimate build 7600
浏覽器版本: IE6 IE7 IE8 Firefox 3.6.6 Chrome 6.0.477.0 dev Safari 5.0 Opera 10.10
測試頁面: fontface.html svgfont.html
本文更新時間: 2010-07-08

關鍵字

font-face CSS 字型 自定義 font SVG TrueType OpenType WOFF EOT

百度 搜素    web 字型格式，一大把的案例，wcschool 裡面 css3 字型 部分 有講解怎麼引用。

以上都TM 廢話。

其實 需要某種字型相容各種浏覽器 就隻要  ttf和 eot  就行，ttf很好下載下傳，eot 一般不好轉換，http://down.51cto.com/data/178142  這個 轉換器 非常好，我測試 ok .

 http://7sbrz8.com1.z0.glb.clouddn.com/51CTO下載下傳-字型轉換工具(測試OK).rar                (我的七牛網盤下載下傳)

轉載于:https://www.cnblogs.com/bingguang/p/4123352.html

作業系統 人工智能
上一篇: springboot（2.1.1.RELEASE）啟用jdk動态代理（預設啟用cglib）的方法
下一篇: 密碼學安全歸約7 Analysis(Towards A Correct Reduction)

繼續閱讀