我們一般在網頁上使用的是常用字型,通常網頁上不能使用一些特殊字型,否則瀏覽者可能無法正確瀏覽到。即使我們可以通過、flash、sifr等技術來實現網頁使用特殊字型,但這些方式都有乙個嚴重的缺點:不利於seo(search engine optimization,搜尋引擎優化)。css3 @font-face 規則
您「自己的」的字型是在 css3 @font-face 規則中定義的。
下面介紹一種非常有利於seo的特殊字型應用方法:在css中通過@font-face屬性來實現網頁中嵌入特殊字型。【第一步】獲取字型檔案
獲取要使用字型的檔案格式,確保能在主流瀏覽器中都能正常顯示該字型。
瀏覽器支援:firefox、chrome、safari 以及 opera 支援 .ttf (true type fonts) 和 .otf (opentype fonts) 型別的字型。【第二步】使用您需要的字型internet explorer 9+ 支援新的 @font-face 規則,但是僅支援 .eot 型別的字型 (embedded opentype)。
注釋:internet explorer 8 以及更早的版本不支援新的 @font-face 規則。
在新的 @font-face 規則中,您必須首先定義字型的名稱(比如 myfont),然後指向該字型檔案。如需為 html 元素使用字型,請通過 font-family 屬性來引用字型的名稱 (myfont):
獲取到三種格式的字型檔案後,在樣式表中宣告該字型,並在需要的地方使用該字型。
字型宣告如下:
在頁面中需要的地方使用該字型:注釋:永遠相信美好的事情即將發生執行結果:
字型的名稱,font - face規則:
如果字型檔案是在不同的位置,請使用完整的url:
您必須為粗體文字新增另乙個包含描述符的 @font-face:css3 字型描述符描述符值比如:
檔案 "sansation_bold.ttf" 是另乙個字型檔案,它包含了 sansation 字型的粗體字元。@font-face
只要 font-family 為 "myfirstfont" 的文字需要顯示為粗體,瀏覽器就會使用該字型。
通過這種方式,我們可以為相同的字型設定許多 @font-face 規則。
描述font-family
name
必需。規定字型的名稱。
srcurl
必需。定義字型檔案的 url。
font-stretch
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
可選。定義如何拉伸字型。預設是 "normal"。
font-style
ormal
italic
oblique
可選。定義字型的樣式。預設是 "normal"。
font-weight
font-weight
normal
bold
100200
300400
500600
700800
900可選。定義字型的粗細。預設是 "normal"。
unicode-range
unicode-range
可選。定義字型支援的 unicode 字元範圍。預設是 "u+0-10ffff"。
網頁程式Flex 動態嵌入字型
概述 flex編譯器,位於flex sdk的bin目錄,例如 flash builder 4 sdk 3.5 c program files adobe adobe flash builder 4 sdks 3.5.0 bin 編譯器的詳細使用說明參考官方文件using the flex compi...
iframe 網頁中嵌入其他網頁
一 固定位置的iframe 效果如下 說明 這是乙個嵌入含有天氣預報的應用例項。這個效果最常用。其中 1 http weather.265.com weather.htm 為嵌入的網頁的位址 2 width 168px height 50px 為嵌入的網頁的寬度和高度,數值越大,範圍越大 要隱藏顯示...
網頁設計中的預設字型
打算將 的預設字型調整為 font 12px 1.5 tahoma,helvetica,arial,sans serif 測試頁面 default fonts test.html 理由如下 font size採用px,不採用em.理由是em帶來的可用性提公升很有限,同時基於em很難保證視覺設計的精確...