CSS @font-face規則引用外部服務器字體

時間 2021-01-29

標籤 css html web chrome 瀏覽器服務器 ide svg 工具測試欄目 CSS 简体版

原文原文鏈接

CSS 層疊樣式表能夠對頁面進行更精細的樣式設置，固然有些人就像自定義文字的字體，可是默認font-family 內置字體樣式也就只有幾種。css

如何才能把第三方字體引入呢？html

下面介紹一個CSS 規則 @font-face web

@font-face是CSS3中的一個功能，它主要是把自定義的Web字體嵌入到網頁中，讓網頁上使用的字體能夠不受客戶端字體庫的限制。chrome

這個功能是很是好用的，可是在使用中仍是會碰到一點問題，主要就是IE下會出現一些問題。瀏覽器

來看看@font-face介紹：
服務器

語法：ide

@font-face { font-family : name ; src : url ( url ) ; sRules } svg

取值：工具

name :　字體名稱。任何可能的 font-family 屬性的值測試

url ( url ) :　使用絕對或相對 url 地址指定OpenType字體文件

sRules :　樣式表定義

說明：

能夠設置嵌入HTML文檔的字體。此規則無默認值。

此規則使你可以在網頁上使用客戶端本地系統上可能沒有的字體。 url 地址必須指向 OpenType 字體文件(.eot或.ote)。此文件包含能夠轉換爲 TrueType 字體的壓縮字體數據，能夠用來提供HTML文檔使用該字體，或取代客戶端系統已有的同名字體。此文件可使用 Microsoft WEFT 工具製做。

css示例：

@font-face {
    font-family: my_monaco;
    src: url(http://***.cn/font/monaco.ttf);
}

這樣一來，font-family 就能夠設置本身定義好的第三方字體 my_monaco 了。

測試：

調試界面報錯，英文看不懂？不要緊咱們換IE來試試

@font-face 跨源請求失敗。資源訪問受限。也就是沒權限

上面Chrome的說了，你應用的font源默認只容許自身域名使用，若是想外部域使用就必須在font服務器添加Access-Control-Allow-Origin http頭部信息。

Access-Control-Allow-Origin 頭信息,語法以下:

Access-Control-Allow-Origin: <origin> | *

origin參數指定一個容許向該服務器提交請求的URI。對於一個不帶有credentials的請求,能夠指定爲'*',表示容許來自全部域的請求.

舉個例子：容許來自http://youku.com 域的請求，你能夠這樣指定：

Access-Control-Allow-Origin: http://youku.com

我這裏測試就設置爲所有了：

例如 Access-Control-Allow-Origin:*

那麼接下來就能夠在font服務器的http配置裏面添加響應的頭部信息。

添加完成後，再測試：

Chrome測試

字體能夠正常顯示，Chrome無報錯。

IE11 測試：

IE控制檯無報錯。

接下來咱們換個字體。

IE 測試：

報錯，未能完成OpenType嵌入。

瀏覽器的兼容性

字體渲染是一件棘手的事情 - 尤爲是老移動瀏覽器。你應該老是測試，你能夠儘量多的設備支持。發現問題的速度越快越好。

最後，請記住，使用許多不一樣的字體可能會減慢你的網站須要時間來加載全部這些字體！

並不是全部的瀏覽器都支持@ font-face的！

目前，@ font-face的支持

Firefox Opera Chrome Safari IE9及其以上版本

這是你會說他不支持IE9如下的瀏覽器嗎，不用擔憂，在舊的瀏覽器使用@ font-face時，不一樣的瀏覽器支持特定的字體文件。

不一樣的瀏覽器支持不一樣的字體格式渲染：

IE瀏覽器：EOT
Mozilla瀏覽器：OTF，TTF
Safari瀏覽器：OTF，TTF，SVG
opera：OTF，TTF，SVG
Chrome瀏覽器：TTF，SVG

@ font-face的資源

Font Squirrel

http://www.fontsquirrel.com/home

Font Squirrel是一個很棒的網站，你應該很是熟悉。Font Squirrel是一家集優質商業使用的免費字體供您下載。最重要的是，他們有@ font-face的工具包部分和@ font-face的工具包生成器。Font Squirrel工具包，爲您提供不一樣的字體類型，你須要支持的每個瀏覽器。

@ font-face的工具包

Font Squirrel的套件部分是現成的工具包，其中包括多種字體格式，CSS和HTML代碼的集合。全部你必須作的是選擇一個字體，下載工具包，並複製代碼。這是簡單，。最重要的是，他們有一個很大的選擇充滿了巨大的字體。

@ font-face的工具包生成器連接以下：

http://www.fontsquirrel.com/tools/webfont-generator

另外一方面，你有工具包生成器，您上傳您本身的字體，它爲您提供了所需的全部代碼。由於它創造了一個新的工具包爲您的字體。全部你必須作的就是下載新的套件，並複製代碼到您的網站。它也就是這麼簡單。然而，當使用本身的字體，請確保您有權利使用它- 不是全部的字體版權容許

最後：

爲了使@font-face達到更多的瀏覽器支持，有一個獨特的@font-face語法叫Bulletproof @font-face:

@font-face {

font-family: 'YourWebFontName';

src: url('YourWebFontName.eot?') format('eot');/*IE*/

src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/

}

但爲了讓各多的瀏覽器支持，你也能夠寫成：

@font-face {

font-family: 'YourWebFontName';

src: url('YourWebFontName.eot'); /* IE9 Compat Modes */

src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('YourWebFontName.woff') format('woff'), /* Modern Browsers */

url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */

url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */

}

/*format括弧裏面的是字體後綴名即格式名*/

另外：如今國產瀏覽器的裝機量很大，而國產雙核瀏覽器兼容模式並不支持，能夠經過如下方式直接強制切換到極速模式。

1，網頁頭部加入

在head標籤中添加一行代碼：

<html>
  <head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
  </head>
  <body>
  </body>
</html>

content的取值爲webkit,ie-comp,ie-stand之一，區分大小寫，分別表明用webkit內核，IE兼容內核，IE標準內核。

若頁面需默認用極速核，增長標籤：<meta name="renderer" content="webkit">

若頁面需默認用ie兼容內核，增長標籤：<meta name="renderer" content="ie-comp">

若頁面需默認用ie標準內核，增長標籤：<meta name="renderer" content="ie-stand">

2，另外爲了保險起見再加入

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

CSS @font-face規則 引用外部服務器字體

CSS @font-face規則引用外部服務器字體