CSS在線字體庫，外部字體的引用方法@font-face

時間  2019-11-13
標籤 css 在線 字體 外部 引用 方法 font face 欄目 CSS 简体版
原文   原文鏈接

@font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，咱們在Web的開發中使用字體不怕只能使用Web安全字體，大家當中或許有許多人會不天然的問，這樣的東西IE能支持嗎？當我告訴你們@font-face這個功能早在IE4就支持了你確定會感到驚訝。個人Blog就使用了許多這樣的自定義Web字體，好比說首頁的Logo，Tags以及頁面中的手寫英文體，不少朋友問我如何使用，能讓本身的頁面也支持這樣的自定義字體，一句話這些都是@font-face實現的，爲了能讓更多的朋友知道如何使用他，今天我主要把本身的一點學習過程貼上來和你們分享。javascript

首先咱們一塊兒來看看@font-face的語法規則：css

   @font-face {
      font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }

取值說明html

一、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如「font-family:"YourWebFontName";」java

二、source:此值指的是你自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑；css3

三、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；web

四、weight和style:這兩個值你們必定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。chrome

兼容瀏覽器api

說到瀏覽器對@font-face的兼容問題，這裏涉及到一個字體format的問題，由於不一樣的瀏覽器對字體格式支持是不一致的，這樣你們有必要了解一下，各類版本的瀏覽器支持什麼樣的字體，前面也簡單帶到了有關字體的幾種格式，下面我就分別說一下這個問題，讓你們內心有一個概念：瀏覽器

1、TureTpe(.ttf)格式：安全

.ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

2、OpenType(.otf)格式：

.otf字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，因此也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

3、Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

4、Embedded Open Type(.eot)格式：

.eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；

5、SVG(.svg)格式：

.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

這就意味着在@font-face中咱們至少須要.woff,.eot兩種格式字體，甚至還須要.svg等字體達到更多種瀏覽版本的支持。

爲了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@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 */ }

說了這麼多空洞的理論知識，你們必定有點心癢癢了，那麼咱們先來看看W3CPLUS首頁中導航部分的蘭色字體是如何實現的，假如咱們有一個這樣的DOM標籤，須要應用自定義字體：

HTML Code:

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

經過@font-face來定義本身的Web Font:

  @font-face { font-family: 'NeuesBauenDemo'; src: url('../fonts/neues_bauen_demo-webfont.eot'); src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); font-weight: normal; font-style: normal; }

我在這裏採用的是相對路徑，固然你們也可使用絕路徑。到這裏咱們就須要把定義好的字體應用到咱們實際頁面中去：

   h2.neuesDemo { font-family: 'NeuesBauenDemo' }

效果：

看到上面的效果，我想你們會感到@font-face很神奇，同時也想爭着作作看，但是一動手才發現，特殊字體我要怎樣才能獲得，那些.eot,.woff,.ttf,.svg這些字體格式又怎麼獲取呢？有些朋友可能就不知道如何運手了，那麼咱們就帶着這些問題來一個全程完成的實例吧：

1、獲取特殊字體：

咱們拿下面這種single Malta字體來講吧：

要獲得single Malta字體，不外乎兩種途徑，其一找到付費網站購買字體，其二就是到免費網站DownLoad字體。固然要給錢的這種傻事我想你們都不會作的，那咱們就獲得免費的地方下載，在哪有呢？我平時都是到Google Web Fonts和Dafont.com尋找本身須要的字體，固然網上也還有別的下載字體的地方，這個Demo使用的是Dafont.com的Single Malta字體，這樣就能夠到這裏下載Single Malta：

Single Malta下載下來後，須要把它解壓縮出來：

2、獲取@font-face所需字體格式：

特殊字體已經在你的電腦中了，如今咱們須要想辦法得到@font-face所需的.eot,.woff,.ttf,.svg字體格式。要獲取這些字體格式，咱們一樣是須要第三方工具或者軟件來實現，下面我給你們推薦一款我經常使用的一個工具fontsquirrel,別的先很少說，首跟我點這裏進入到下面這個界面吧。

若是你進入頁面沒有看到上圖，你能夠直接點擊導航:

若是你看到了上面的界面，那就好辦了，咱們來看如何應用這個工具生成@font-face須要的各類字體，先把咱們剛纔下載的字體上傳上去：

上傳後按下圖所示操做：

如今從Font Squirrel下載下來的文件已經保存在你本地的電腦上了，接着只要對他進行解壓縮，你就能看到文件列表以下所示：

你們能夠看到，解壓縮出來的文件格式，裏面除了@font-face所須要的字體格式外，還帶有一個DEMO文件，若是你不清楚的也能夠參考下載下來的DEMO文件，我在這裏不對DEMO說明問題，我主要是給你們介紹如何把下載下來的文件有價值的運用到咱們的項目中。

例如在本身的本地建立了一個fontface項目：

爲了讓項目結構更清晰，咱們在項目中單首創建一個fonts目錄，用來放置解壓縮出來@font-face所需的字體格式：

如今@font-face所需字體已經加載到本地項目，如今本地項目中的style.css中附上咱們須要的@font-face樣式

   @font-face { font-family: 'SingleMaltaRegular'; src: url('../fonts/singlemalta-webfont.eot'); src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/singlemalta-webfont.woff') format('woff'), url('../fonts/singlemalta-webfont.ttf') format('truetype'), url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg'); font-weight: normal; font-style: normal; }

到這裏爲止，咱們已經經過@font-face自定義好所需的SingleMalta字體，離最後效果只差一步了，就是把本身定義的字體應用到你的Web中的DOM元素上：

   h2.singleMalta { font-family: 'SingleMaltaRegular' }

效果：

看到上面的效果，那你們就知道咱們實現成功了。那麼關於@font-face幫你打造特殊效果的字體，到這裏基本上就完成了，我在這裏須要提醒使用者：

一、若是你的項目中是英文網站，並且項目中的Logo，Tags等應用到較多的這種特殊字體效果，我建議你不要使用圖片效果，而使用@font-face，可是你是中文網站，我以爲仍是使用圖片比較合適，由於加載英文字體和圖片沒有多大區別，可是你加載中文字體，那就不同了，由於中文字體太大了，這樣會影響到項目的某些性能的優化；

二、致命的錯誤，你在@font-face中定義時，文件路徑沒有載對；

三、你只定義了@font-face，但並無應用到你的項目中的DOM元素上；

以上幾點都是在平時製做中常出現的問題，但願你們能小意一些，另外咱們沒有辦法在購買全部字體，就算你實力雄厚，那也沒有辦法在一臺服務器主機上放置你全部項目須要的字體。所以我給你們提供幾個免費字體下載的網址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,否則你點這裏將有更多的免費字體。前面幾個連接是幫助你獲取一些優美的怪異的特殊字體，但下面這個工具做用更是無窮的大，他能幫你生成@font-face所須要的各類字體，這工具就是Font Squirrel。

最後在提醒一下，使用@font-face別的能夠忘了，但Font Squirrel千萬不能忘，由於他能幫你生成@font-face所需的各類字體格式。

到此關於@font-face就介紹完了，不知道你們喜歡不喜歡，若是喜歡的話趕快動手實踐一下，有Blog的能夠立刻運用上去，也能夠炫一下。

2014年03月更新——@font-face沒法在Firefox下正常工做的解決方案，詳細的請點擊：http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie

著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-font-face © w3cplus.com

 

 

 

 

@font-face{
　　font-family: "本身的字體名字，能夠隨便起，能夠不和字體文件名相同";
　　src: url('下載的字體路徑');
}
注意這樣只是把字體定義好了，並無應用到任何的元素上。只要在任何的html元素上指定font-family:"本身定義的字體名" 便可。
注意：經本身測試，應用自定義字體時，font-family的值只能寫自定義的字體名，不能加其餘任何的多於字體或者多於字符，不然沒法應用自定義字體！
 
目錄：


一： {font-family:serif,sans-serif,fantasy,cursive}表示什麼意思

 這是CSS中的五大字體家族。


serif
serif 中文翻譯爲「襯線字體族」。
serif 具備末端加粗、擴張或尖細末端，或以實際的襯線結尾的一類字體。
能夠看出 serif 老是在文字末端作文章，這樣作的目的是加強可讀性，也就是說在字號比較小的時候，serif 一族的字體仍然是比較好辨認的。
serif 典型的字體有：Times New Roman、MS Georgia、宋體……
serif 還可衍生出兩種字體族：petit-serif（小襯線字體族（末端變化不明顯））、slab-serif（雕版襯線字體族（末端變化很是明顯））。因爲顯示器顯示的字都不大，因此通常將小襯線字體族看做無襯線字體族，好比其中的黑體。

sans-serif
sans-serif 中文翻譯爲「無襯線字體族」。sans- 前綴是法語，發音爲 /san/，意爲「無」。
sans-serif 字體比較圓滑，線條粗線均勻，適合作藝術字、標題等，與「襯線字體」相比，若是字號比較小，看起來就會有些吃力。
sans-serif 典型的字體有：MS Trebuchet、MS Arial、MS Verdana、幼圓、隸書、楷體……

cursive
cursive 中文翻譯爲「手寫字體族」。
顧名思義，這類字體的字就像手寫的同樣。
cursive 典型的字體有：Caflisch Script、Adobe Poetica、迷你簡黃草、華文行草……

fantasy
fantasy 中文翻譯爲「夢幻字體族」。
fantasy 主要用在圖片中，字體看起來很藝術，實際網頁上用得很少。
fantasy 典型的字體有：WingDings、WingDings 二、WingDings 三、Symbol……

monospace
monospace 中文翻譯爲「等寬字體族」。
咱們知道英文中各字母是不等寬的，但用 monospace，各個字母就是等寬的了，就能夠像中文同樣排版了。
monospace 典型的字體有：Courier、MS Courier New、Prestige……

總結
總的來講字體分爲兩個大類：serif、sans-serif，這兩個大類下又能夠分：cursive、fantasy、monospace

 

 

 

 

二： 360和谷歌外部字體

最近，谷歌全面退出中國，谷歌官網域名google.com、谷歌香港google.com.hk都打不開， ping了一下google.com和google.com.hk兩個域名的服務器狀況，最後ping出來的IP地址均顯示爲「美國」，也就是說谷歌香港(google.com.hk)的服務器，已由香港轉移至美國，因此連接時間會很長，甚至斷斷續續出現請求超時的狀況。

 

這樣就是說谷大神在中國再也神不起來了。欲哭無淚的是咱們苦逼的IT啊，谷歌字庫不能用了，經網上一番找尋終於在wangzhan.360.cn上給解決了，雖然對360沒有什麼好感，但其提供的這一套服務仍是至關不錯的！

字體庫的引用方法：（注：360字體庫最近掛掉了，其實早在15年初google就在北京設置了服務器，ping fonts.googleapis.com 也能夠發現，ip爲203.208.40.136，地址是北京電信海淀區，比360鏡像要快不少,因此直接用fonts.googleapis.com便可，沒必要用fonts.useso.com）

  1. <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
(family就等字體名稱，空格用+號代替)在頁面調用
     
  2. @import url(http://fonts.googleapis.com/css?family=Ubuntu);
(family就等字體名稱，空格用+號代替)在樣式文件裏面調用，如font-family爲 Wire One 則 http://fonts.useso.com/css?family=Wire+One
     頁面JS調用方法(families就等字體名稱，空格用+號代替) 

web字體庫的樣式調用方法：

樣式裏面用法：font-family: 'Poiret One', sans-serif;（字體名稱）

 

三：（更詳細的介紹）

原文連接：  http://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/#icomments

使用 Google Fonts 爲網頁添加美觀字體

在線字體提供豐富多樣的字體樣式，能使頁面更美觀，更具吸引力。Google Fonts 就是一個開源的在線字體庫，使用起來簡單快速。

 

前言

文字是網頁中很重要的組成部分。爲文字選擇一個合適的字體，可以更好的展示一個網站的個性，表達所要傳遞的信息，同時吸引用戶來產生興趣。

說到字體，咱們首先會想到 CSS 裏面的 font，例如：

<html>
<head>
    <style>
        p { font-family: Arial, Helvetica, sans-serif; }
    </style>
</head>
<body>
    <p>some text</p>
</body>
</html>

在這段 HTML 代碼中爲<p>標籤訂義了字體，當瀏覽器解析<p>some text</p>標籤時，首先會在系統中查找 Arial 這個字體，若是找不到，就找 Helvetica 字體，若是仍是找不到，就會查找瀏覽器默認的 sans-serif(非襯線)字體，最後把文字渲染出來。

 

回頁首

什麼是安全字體

安全字體這個概念，也許不少人都不是很熟悉，咱們先舉個例子：

font-family: Arial, Helvetica, sans-serif;

這個對字體（font-family）的定義就是一個安全字體。每種操做系統都有本身默認安裝的字體，瀏覽器只能正常顯示操做系統中安裝了的字體。而不一樣的操做系統默認安裝的字體不徹底相同，有的甚至名稱都不同，在這種狀況下，咱們必須定義安全字體，使字體在全部的瀏覽器中都可以正常顯示。

在上面這個 font-family 的定義中，咱們選擇 Arial 做爲首選字體（注：Arial 字體是最經常使用的 sans serif 字體，也是 Windows 的默認字體，當字體很小是不容易閱讀），可是，蘋果系統中沒有這個字體，因此咱們選擇 Helvetica（和 Arial 很類似）做爲第二備選字體，最後咱們選擇 sans-serif 做爲第三備選字體，若是在一個既沒有 Arial 也沒有 Helvetica 的系統裏，那麼瀏覽器會使用默認的 sans-serif 字體來渲染文字。這樣，咱們很大程度上保證了使用不一樣操做系統的訪問者都能看到相同（至少是相似）的頁面文字。

除了 Arial，常見的安全字體還有：

  • Verdana 字體，它是微軟公司的核心字體之一，專門爲屏幕顯示而開發的。它的應用普遍，寬度大而易於閱讀，是顯示器中最清晰的字體。CSS 寫法：font-family: Verdana, Geneva, sans-serif;
  • Times New Roman 字體，它是最經常使用的 serif 字體，是瀏覽器默認的字體。小號字的易讀性也不好。CSS 寫法：font-family: 'Times New Roman', Times, serif;

有興趣的讀者能夠經過這個連接來查閱經常使用的安全字體。http://www.w3schools.com/cssref/css_websafe_fonts.asp

在網頁開發中，應該儘可能使用安全字體，也就是高度通用的字體，這樣，訪問者才能流暢的閱讀網頁的全部內容。

可是，網頁設計師必定不會知足於使用這些安全字體，如何才能使用漂亮的字體，並能在普通用戶的瀏覽器中被正確的渲染出來？答案是：使用@font-face 方案。

 

回頁首

@font-face 標籤簡介

@font-face 被列爲了 CSS3 的一項新特性，其實它並非什麼新鮮技術，它最先出如今 CSS2 的規範定義中，可是在 CSS2.1 中又被刪除，如今被正式列入 CSS3。目前主流的瀏覽器（IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+）都可以支持這個屬性，因此不用擔憂會有瀏覽器兼容性問題。

@font-face 容許您在網頁中使用電腦中沒有安裝的字體，徹底擺脫安全字體的限制。只需將字體包安裝在服務器上，當用戶加載網頁時，字體包會自動下載到用戶機器上，保證字體可以正確渲染。

隨着@font-face 的不斷流行，產生了許多新的字體格式圖標集，稱爲網絡字體。Google Fonts API 就是基於@font-face 的特性開發的一套優秀的網絡字體庫。

網絡字體的優勢有不少：

  1. 使用的是真正的文本，而不是圖片，放大和縮小都不會影響渲染效果，用戶體驗好；
  2. 能夠被搜索引擎辨認；
  3. 不像圖片每次須要從新生成，添加刪除更方便。
 

回頁首

如何使用 Google Fonts API

Google Fonts 提供了超過 600 種的高質量的字體，全部的瀏覽器都兼容，無需引入 JavaScript，簡單易用，更重要的是，免費。（雖然，暫時不支持中文字體，由於中文字體庫實在是太大了）。

如今來看下，如何在網頁中使用 Google Fonts。

挑選字體

登陸Google Fonts （谷歌字體官方網站）。（圖 1）

圖 1.Google Fonts 主頁

在主頁中，您能夠直接瀏覽全部的字體，能夠按單個詞語來查看，或者按句子段落來查看總體效果，還能夠調整字體大小。若是您對字體分類比較熟悉，就可使用左邊的搜索條件對字體做篩選。找到您喜歡的字體以後，點擊"Add to Collection"按鈕，而後在網頁下方的"Collection"中便可找到您添加的全部字體。

使用選中的字體來測試您的文字

在上一頁面（圖 1）的"Collection"中，點擊"review"。在預覽頁面中（圖 2），輸入您的測試文字，來查看效果。另外在"review"頁面上，您還能夠調整其它的與字體相關的樣式，好比字體大小，間隔，變換，等等。在圖 2 中，咱們選擇測試的是"Condiment"字體

圖 2.Google Fonts 預覽頁面

在您的網頁中添加字體連接。

若是確認使用該字體， 在網頁下方的"Collection"中，點擊"Use"按鈕，在接下來的頁面中，您將看到詳細的說明，包括字體連接和如何將字體添加到您的網頁中。

有三種方式來添加字體連接：

  • Standard 方式： 
    <link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Condiment'>
  • @import 方式： 
    @import url(http://fonts.googleapis.com/css?family=Condiment);
  • JavaScript 方式：

    （經過添加動態腳本並執行來導入字體，代碼省略）

下一步定義在那個標籤上使用該字體，例如：在<class="myheader">標籤上使用，

.myheader {font-family: 'Condiment', cursive;}

大功告成，您如今能夠打開您的網頁欣賞一下了(圖 3)。

圖 3.測試頁面效果
清單 1.測試頁面代碼
<html>
          <head>
                     <link rel="stylesheet" type="text/css"           
                               href='http://fonts.googleapis.com/css?family=Condiment'>
                    <style>
                             .myheader {
                                        font-family: Condiment, cursive;
                                        font-size: 48px;
                                        text-align: center;
                               }
                    </style>
          </head>
          <body>
                     <div class="myheader"> Test my own text !</div>
          </body>
</html>

優化字體包加載

若是您不是大範圍的在網頁中使用 Google 字體，只是在標題或 logo 裏使用，那麼能夠在 url 裏添加 text 參數，來限制加載的字體包的大小，最高能縮減 90%左右的大小，以此來節約下載流量。例如：http://fonts.googleapis.com/css?family= Condiment'&text=Hello

這樣，您只會下載 h，e，l，o 這四個字母的字體，大大縮小了字體包的大小。

下載字體包

您還能夠把字體包下載並安裝到本地，這樣您就能夠在本地使用這些字體，好比在 Notepad，Microsoft Office 裏。

方法爲：在圖 3 中，點擊下載按鈕， 選擇"Download the font families in your Collection as a zip file"

高級應用 API

Google Fonts 還開放了一些接口（稱爲 Developer API），用於獲取字體庫的信息數據。

好比實時獲取字體庫實際可用的字體及其相關信息：

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

這個請求的返回結果是一個 JSON 類型的數據，包括了每種字體的名稱，樣式種類（好比 regular，italic），版本，修改時間，包含的樣式包的請求地址，等等。

請注意，在 URL 裏面有一個 key，這個 key 是和您的 web 應用工程相聯繫的，只有註冊過的 web 應用才能成功調用 Developer API。咱們必需要在 Google Cloud Console 註冊以後，才能獲取這個 key。

關於這個 Developer API， 能夠參閱這個連接。

 

回頁首

結束語

Google Fonts 很強大，可是也碰到一些加載的問題，最好仍是字體聲明的時候，在最後添加一個安全字體，來保證萬無一失。另外的一個建議是，在網頁中要適量的使用花樣的字體，讓整個頁面保持乾淨簡潔。

 

四： 關於＠font-face具體用法

1 http://www.w3cplus.com/content/css3-font-face  

2 http://www.jb51.net/web/89797.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程