欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3的font-face字體嵌入樣式的方法講解

Kayo   發(fā)布時間：2016-05-13 11:38:18   作者：Kayo Lee   我要評論
CSS3中的font-face可以將我們上傳的自定義的字體顯示出來,有時比如我們要顯示英文音標的字體時便需要用到,本文就整理了一下使用CSS3的font-face字體嵌入樣式的方法講解,需要的朋友可以參考下

對于一個出色的網(wǎng)頁，字體的選擇是相對關鍵的，無奈設計師必須考慮用戶的本地端是否有相應的字體，因此設計常常只能使用一些較為大眾化的常見字體，而舍棄更加適合的字體。在 CSS3 中，這一情況將可以改變。CSS3 中引入了 font-face（嵌入字體類型），實驗 font-face 可以把需要的字體上傳到自己的服務器，再在服務器的網(wǎng)頁中使用該字體并顯示出來，無論瀏覽網(wǎng)頁的用戶的本地端是否有該字體。

語法：

CSS Code復制內(nèi)容到剪貼板
  1. @font-face { font-family : name ; src : url ( url ) ; sRules }   

取值：
name  :? 字體名稱。任何可能的 font-family 屬性的值
url ( url )  :? 使用絕對或相對 url 地址指定OpenType字體文件
sRules  :? 樣式表定義

說明：
設置嵌入HTML文檔的字體。此規(guī)則無默認值。
此規(guī)則使你能夠在網(wǎng)頁上使用客戶端本地系統(tǒng)上可能沒有的字體。 url 地址必須指向 OpenType 字體文件(.eot或.ote)。此文件包含可以轉(zhuǎn)換為 TrueType 字體的壓縮字體數(shù)據(jù)，可以用來提供HTML文檔使用該字體，或取代客戶端系統(tǒng)已有的同名字體。

示例：
例如下面的效果：
2016513113814566.png (1004×204)

CSS Code復制內(nèi)容到剪貼板
  1. @font-face {   
  2.     font-family: 'vanessalovesyoumedium';   
  3.     src: url('vanessalovesyou-webfont.eot');   
  4.     src: url('vanessalovesyou-webfont.eot?#iefix') format('embedded-opentype'),   
  5.          url('vanessalovesyou-webfont.ttf') format('truetype'),   
  6.     font-weight: normal;   
  7.     font-style: normal;   
  8. }   
  9. #test-font {   
  10.     font-size: 24px;   
  11. }   
  12. #test-font span{   
  13.     font-family: vanessalovesyoumedium;   
  14. }  

使用 @font-face 定義字體所需要的文件，為了兼容各個瀏覽器，需要使用多種不同的字體格式，建議至少要有 .eot 和 .ttf 兩種格式，.eot 用于 IE5+ ，.ttf 用于 Chrome 等現(xiàn)代瀏覽器，另外 .otf 也是不錯的選擇，也可以用于現(xiàn)代瀏覽器。

需要注意以下幾點：
1.IE8及更早瀏覽器只支持微軟自有的 .eot 格式
2.IE9.0-10.0部分支持 ttf 和 otf 字體格式
3.現(xiàn)代瀏覽器大多支持 .ttf 和 .otf 兩種格式
4.現(xiàn)代瀏覽器需要從外部引用 @face-font 才能有效，IE 則可以直接在頁面中使用 @face-font

相關文章

最新評論