網頁中嵌入特殊字型(此法利於SEO)

2021-08-21 06:41:54 字數 2242 閱讀 4050

我們一般在網頁上使用的是常用字型,通常網頁上不能使用一些特殊字型,否則瀏覽者可能無法正確瀏覽到。即使我們可以通過、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:

比如:

@font-face

檔案 "sansation_bold.ttf" 是另乙個字型檔案,它包含了 sansation 字型的粗體字元。

只要 font-family 為 "myfirstfont" 的文字需要顯示為粗體,瀏覽器就會使用該字型。

通過這種方式,我們可以為相同的字型設定許多 @font-face 規則。

css3 字型描述符描述符值

描述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很難保證視覺設計的精確...