網(wǎng)站地圖|客服中心|設(shè)為首頁|加入收藏

行業(yè)新聞

首頁 > 新聞 > 網(wǎng)站設(shè)計 > 網(wǎng)頁設(shè)計使用特殊字體有利于網(wǎng)站優(yōu)化

網(wǎng)頁設(shè)計使用特殊字體有利于網(wǎng)站優(yōu)化


  一般在網(wǎng)頁上使用的是常用字體,通常網(wǎng)頁上不能使用一些特殊字體,否則瀏覽者可能無法正確瀏覽到。即使我們可以通過圖片、flash、SIFR等技術(shù)來實現(xiàn)網(wǎng)頁使用特殊字體,但這些方式都有一個嚴(yán)重的缺點(diǎn):不利于網(wǎng)站優(yōu)化。

  在 CSS3 之前,web 設(shè)計師必須使用已在用戶計算機(jī)上安裝好的字體。當(dāng)您找到或購買到希望使用的字體時,可將該字體文件存放到 web 服務(wù)器上,它會在需要時被自動下載到用戶的計算機(jī)上。通過 CSS3,web 設(shè)計師可以使用他們喜歡的任意字體。


網(wǎng)頁設(shè)計使用特殊字體有利于網(wǎng)站優(yōu)化

   

您“自己的”的字體是在 CSS3 @font-face 規(guī)則中定義的。


下面介紹一種非常有利于SEO的特殊字體應(yīng)用方法:在CSS中通過@font-face屬性來實現(xiàn)網(wǎng)頁中嵌入特殊字體。

1,獲取字體文件

    獲取要使用字體的文件格式,確保能在主流瀏覽器中都能正常顯示該字體。

    瀏覽器支持:

    Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。

    Internet Explorer 9+ 支持新的 @font-face 規(guī)則,但是僅支持 .eot 類型的字體 (Embedded OpenType)。

    注釋:Internet Explorer 8 以及更早的版本不支持新的 @font-face 規(guī)則。

    最常見的是.ttf文件,我們需要通過這種文件格式轉(zhuǎn)換為其余兩種文件格式。可以通過網(wǎng)站http://www.fontsquirrel.com/fontface/generator 或onlinefontconverter提供的在線字體轉(zhuǎn)換服務(wù)獲取字體文件格式的轉(zhuǎn)換。這里,筆者推薦第一個站點(diǎn),它允許我們選擇需要的字符生成字體文件(在服務(wù)的最后一個選項),這樣就大大縮減了字體文件的大小,使得本方案更具實用性。

2,使用您需要的字體

    在新的 @font-face 規(guī)則中,您必須首先定義字體的名稱(比如 myFont),然后指向該字體文件。
    如需為 HTML 元素使用字體,請通過 font-family 屬性來引用字體的名稱 (myFont):

    獲取到三種格式的字體文件后,在樣式表中聲明該字體,并在需要的地方使用該字體。

    字體聲明如下:

<style> 
@font-face
{
font-family: myFont;  /*myFont為你定義的字體名稱*/
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
 
div
{
font-family:myFont;
}
</style>

在頁面中需要的地方使用該字體:

    <body>
     
    <div>
    ALWAYS BELIEVE THAT SOMETHING WONDERFUL IS ABOUT TO HAPPEN
    </div>
     
    <p><b>注釋:</b>永遠(yuǎn)相信美好的事情即將發(fā)生</p>
     
    </body>

字體的名稱,font - face規(guī)則:

    font-family: myFirstFont;

字體文件包含在您的服務(wù)器上的某個地方,參考CSS:

    src: url('Sansation_Light.ttf')

如果字體文件是在不同的位置,請使用完整的URL:

    src: url('http://www.example.css/css3/Sansation_Light.ttf')


拓展:使用粗體字體

    您必須為粗體文本添加另一個包含描述符的 @font-face:

    比如:

        @font-face
        {
        font-family: myFirstFont;
        src: url('Sansation_Bold.ttf'),
             url('Sansation_Bold.eot'); /* IE9+ */
        font-weight:bold;
        }

    文件 "Sansation_Bold.ttf" 是另一個字體文件,它包含了 Sansation 字體的粗體字符。
    只要 font-family 為 "myFirstFont" 的文本需要顯示為粗體,瀏覽器就會使用該字體。

    通過這種方式,我們可以為相同的字體設(shè)置許多 @font-face 規(guī)則。


另外;解決字體在不同瀏覽器呈現(xiàn)不同樣式問題的一個方法;

對字體設(shè)置font-weight:600后,在火狐瀏覽器有加粗的樣式,但是放在Chrome中并沒有任何效果。

原因:字體本身就有粗細(xì)程度,對于部分字體Chrome瀏覽器并不會對本字體加粗,每個瀏覽器的默認(rèn)字體不同,如果該字體系統(tǒng)中并不存在,那么瀏覽器會顯示默認(rèn)字體,那么 不同的瀏覽器可能會出現(xiàn)字體不同的現(xiàn)象。

解決辦法:1、引用字體庫@font-face,統(tǒng)一使用字體庫中的字體 (但是會影響瀏覽器的加載速度)
2、直接使用圖片來代替字體(同樣影響內(nèi)容的加載)3、使用大眾化字體,盡量使用Windows或者Linux中固有的字體,如果沒有 就用其他類似的字體替代,在font-family中挨個設(shè)置,類似于這種:font-family: ‘HiraginoSansGB-W3’, ‘Helvetica Neue’, Helvetica。
  • 基于用戶創(chuàng)新

    界面設(shè)計日新月異,夢創(chuàng)義堅持基于用戶需求的界面創(chuàng)新設(shè)計……

  • 服務(wù)設(shè)計思維

    互聯(lián)網(wǎng)的格局發(fā)生的改變,在我們進(jìn)行設(shè)計服務(wù)時更是考慮不同用戶、不同……

  • 洞察用戶心理

    洞察用戶有意識和無意識的行為以及心理特征通過構(gòu)造一系列的服務(wù)來促進(jìn)……

  • 查看更多 >>

最新新聞Latest News

中小型企業(yè)網(wǎng)站建設(shè)完應(yīng)該如何營銷
很多中小型企業(yè)往往糾結(jié)于以下10個問題:一、我們起步比別人晚,我們的……
做企業(yè)網(wǎng)站到底做給誰看?
設(shè)計經(jīng)常時不時的遇到一些企業(yè)客戶,常常搞不清楚誰會真正看你的企業(yè)網(wǎng)……
傳統(tǒng)企業(yè)進(jìn)軍移動互聯(lián)網(wǎng),從移動云網(wǎng)站開始
移動互聯(lián)網(wǎng)是移動通信和互聯(lián)網(wǎng)融合的產(chǎn)物,其發(fā)展的重要基礎(chǔ)便是智能手……
網(wǎng)站建設(shè)和運(yùn)營五大細(xì)節(jié)決定用戶黏性
網(wǎng)站的成功離不開搜索引擎優(yōu)化,更離不開最基礎(chǔ)最根本的用戶群體,如何……
2015年值得關(guān)注的電子商務(wù)5大趨勢
線上線下銷售的界線正在變得越來越模糊。在2015年,這一趨勢仍將繼續(xù)!

本站搜索關(guān)鍵詞:網(wǎng)頁設(shè)計使用特殊字體有利于網(wǎng)站優(yōu)化 | 北京網(wǎng)站建設(shè) | 北京網(wǎng)站建設(shè)公司 | 北京網(wǎng)站建設(shè)中心 | 高端網(wǎng)站建設(shè) | 電商網(wǎng)站建設(shè) | 企業(yè)網(wǎng)站建設(shè) | 手機(jī)網(wǎng)站建設(shè) | 微站官網(wǎng)建設(shè) | APP開發(fā)

銷售熱線

7x24小時全國售前咨詢熱線:010-57281389

7x24小時全國售后服務(wù)熱線:13020085953 15313016798

手機(jī) | 微信同號:18600846206   QQ:523313456

立即咨詢 網(wǎng)站建設(shè)業(yè)務(wù)咨詢|客服熱線:010-57281389 13020085953

點(diǎn)這里給我發(fā)消息 電子郵箱:cnet99@cnet99.com

營業(yè)地址(東部):北京市朝陽區(qū)伊莎文心廣場A座3層B-22

位置分享

營業(yè)地址(西部):北京市豐臺區(qū)汽車博物館東路1號諾德中心9-605

標(biāo)準(zhǔn)網(wǎng)站,網(wǎng)站建設(shè),域名注冊,虛擬主機(jī),獨(dú)享主機(jī),企業(yè)云郵箱,網(wǎng)站維護(hù)一條龍,北京網(wǎng)站建設(shè)中心


  掃一掃 加微信
  微信號:cnet99com

  掃一掃 加關(guān)注
  微信平臺

天潤智力-專注于互聯(lián)網(wǎng)平臺建設(shè)與服務(wù)領(lǐng)域 中國互聯(lián)網(wǎng)平臺建設(shè)服務(wù)提供商

萬網(wǎng)阿里云金牌首席合作伙伴站點(diǎn) 全線代理萬網(wǎng)阿里云產(chǎn)品及服務(wù)

中國萬網(wǎng)正式通過ISO9001國際標(biāo)準(zhǔn)質(zhì)量體系認(rèn)證

Copyright©1999-2024 天潤智力 備案/許可證編號 京ICP備2020040216號-3

公安部備案號 11010502032413