增加網站排名的祕密武器

2019-04-18 16:34:40.063

分類: Products and Applications

Web Font網頁字型

想讓網頁美美的呈現在瀏覽者的面前,許多網站常常仰賴平面設計師來處理相關的圖文排版。然而,平面與程式設計之間往往又有一道看不見的鴻溝,讓已有想法的平面設計師們,不曉得該如何將概念在網頁上付諸實現,因此結果變成:把要展現的內容、字型、圖片,排完之後做成一張更大的圖片,然後將圖片丟到網站的頁面上。這種利用製作成圖片的方式來編排內容的方式,給了平面設計師最無痛的Solution,可以在許多中小型電商和使用CMS(Content Management System,內容管理系統)的網站中發現。另外,不想網頁永遠只有新細明體(現在流行起微軟正黑體),而想要運用更適合的字型來呈現頁面,以往的方式似乎也只有將內容先套用字型後再輸出為圖片一途。

儘管這種方式,可以不透過編寫程式與設定標籤來完成網頁編輯,但搜尋引擎並無法解析圖片中的文字內容,當網路蜘蛛無法爬出網頁中的內容時,這些內容就很難被關鍵字所連結。想想看,要賣一雙「會飛的鞋子」,但你的客戶卻沒辦法估狗這些關鍵字找到你的網站會是多麼可惜。

將文字做成圖片會增加網頁載入時的流量,甚至造成關鍵字與排名落後。

Web Font(網頁字型)技術,提供網頁設計時套用各種字型於文字上,並顯示給所有瀏覽網頁的人。仔細看看,包含本篇文章,所有iFontCloud網頁中的文字都套用了熱門的「文鼎UD晶熙黑體」,你依舊可以選取這些文字,不需要每增修一次網頁內容就得重做一張圖片。

Alexa.com網站排名的計算是以網站的使用流量、熱門度、互動率、曝光度等資訊為基礎,並以不同比重的加權總分作為排名。由於Alexa的取樣數量相當大,且主要參考依據為現今網路世界的主流瀏覽器(Internet Explorer、Firefox和Google Chrome…),因此一般仍被最廣泛用於評估網站的受歡迎度。

Web Font技術的使用在國外行之有年,根據Http Archive就Alexa.com的排名中的前一千大網站分析,到2013年為止有在首頁套用Web Font的網站是23%,到了2014年成長到43%,比例不少,是吧?Google Fonts更針對Alexa.com 2013年排名中的每一個頁面分析,發現:

前1M網站使用Web Font比例為46%

前10K網站使用Web Font比例為65%

前百大網站使用Web Font比例為73%

這些數據透露了一個訊息:越熱門的網站使用Web Font的比例越高。無論是為了選擇更適合的字型或是讓使用者經驗一致(RWD網頁可以針對不同的載具選擇不同粗細的字型,讓小螢幕上顯示的字不會糊成一團),Web Font在歐美國家也醞釀超過3年,從2013年開始有跳躍性的成長,明顯的證據是,Adobe Typekit分析了2014年8月份銷售額,排出美國十大汽車廠商,全部套用了Web Font技術。

那麼為什麼亞洲使用Web Font這麼少呢,主要的原因還是在於字數的差異。完成一套英文字型,包含了26個字母與各種標點符號零零總總也不過百來個字,開玩笑,我們常用的中文字就超過一萬了欸(突然覺得中文博大精深)!也因為這樣的差距,中文的Web Font無法像英歐文可以直接下載所有字型到瀏覽器上顯示,必須先分析網頁中的所有文字後通知WebFont伺服器,請伺服器只要傳這些字就好,這種技術我們稱之為文字的Dynamic Subsetting。

以iFontCloud的Web Font服務流程舉例:當使用者點了一個套用Web Font的網址,網頁中的JavaScript會分析頁面中所有的文字後通知Web Font伺服器,伺服器針對匹配的字型抓出對應的文字後,組成一份包含所有頁面文字的字型檔提供網頁下載並套用。這樣不論是在任何裝置上瀏覽網站,都可以看到裝置本身所沒有的字型。

在後台設定好標籤對應的字型,再將提供的JS連結放到網頁HEAD下即可。


Products and Applications

輸入內碼也可以打出你想要的字

能夠代表一個人的稱謂有很多種,有本名、小名、綽號,還有獨一無二的身分證字號,在輸入法中,好比「林」這個字,注音輸入法輸入「ㄌㄧㄣˊ」,倉頡輸入法輸入「木+木」可以找到他,這就好比稱謂一樣,以不同的方式可以叫出不同的字碼,內碼輸入法也是其中一種,而且就是像身分證字號那樣,是一種獨一無二的,在標準字中,一個字碼就代表一個字,如果今天我們得知這個字碼Unicode碼位,但不知道他的念法或倉頡,就可以用這個小技巧。

以「林」這個字為例,開啟電腦的微軟注音或微軟倉頡,輸入「` 」+「U」+「6797」,輸入完字碼點選空白鍵輸出,就可以打出這個字碼所代表的字,這邊需要小提醒,這邊輸入的數字需要點選左邊上排的數字鍵,如果輸入右邊數字鍵盤,是沒有反應的喔~以「林」這個字為例,開啟電腦的微軟注音或微軟倉頡,輸入「` 」+「U」+「6797」,輸入完字碼點選空白鍵輸出,就可以打出這個字碼所代表的字,這邊需要小提醒,這邊輸入的數字需要點選左邊上排的數字鍵,如果輸入右邊數字鍵盤,是沒有反應的喔~

My alt text

 

 

同場加映,如果今天想要知道一個字的字碼怎麼辦,我們只需要開啟Word,在上面鍵入您想知道字碼的字,例如「林」這個字,輸入完後直接點選鍵盤的Alt+X,這個字就會轉換成Unicode的字碼「6797」。

 

Products and Applications

如何將可變式字體使用於網頁上

時間在2016 年底,Microsoft、Apple、Adobe、Google聯合發佈了OpenType 1.8 可變式字體Variable Font。

 

一個可變式字體檔案可以包含傳統靜態字體家族中的每一個字體。如果使用者端在字體有使用到兩個字重以上的情境,基於可變式字體技術的特性,字體的檔案資料量是可變式字體的一個優勢,我們以文鼎UD晶熙黑體G30字體為例,如果設計案件需要使用5個字重、4個字寬這樣龐大的字體家族,那麼總共20個字體檔案約有160MB,但若採用可變式字體,則僅需20MB,足足減少了87.5%的檔案資料量。

更好的是,設計師和工程師還可以幾乎不受限制的使用可變式字體中的變化。例如字重與字寬的變化,使用者可以在Medium、Heavy或與長體Condensed間透過變數軸或參數的調整自由穿插的使用字體。隨著可變式字體的推出與應用軟體的支援,我們可以預測到可變式字體使用上的好處:為網頁/UI工程師在多字重字體資料量提供更好的壓縮,為設計師在作品上提供更細膩的呈現,以及為讀者提供更精緻的閱讀體驗。

 

可變式字體在2016/11月發佈後,最早支援可變式字體的主要設計軟體是 Adobe Photoshop、Illustrator 和 InDesign。如今,這些軟體內建了多款英文可變式字體,因此,現在數百萬使用 Creative Cloud 的設計師都可以體驗到可變式字體這種新的排版潛力。

 

使用情境如果移轉到Web呢?我們先來體驗一下吧!將滑鼠經過下方文字,看看會有怎樣的效果~

 

這個效果都是可變式字體透過CSS的設定所設計出來的互動呈現,我們分解成5個步驟:

1. 設定Web Font

於網頁內嵌入Web Font JS

 

2. 準備好小篇幅文章,設定於網頁內

例如文字為『文鼎晶熙黑』,將文字用<span>分別組合起來並放入網頁內<span>今</span> <span>晚</span> <span>我</span> <span>想</span> <span>來</span><span>點</span>

 

3. 設定字型名稱\

span {

    font-family:'文鼎VF甜妞體_Wr';

}

 

4. 設定動畫呈現

預設文字字重為 300

span {

    font-variation-settings: 'wght' 300;

}

 

當滑鼠移到文字上時,將字重設定為 600

span:hover {

    font-variation-settings: 'wght' 600;

}

 

5. 加入一些進場、退場效果

設定3秒回到原始字重300

span {

    font-variation-settings: 'wght' 300;

    transition: 3s;

}

 

設定0.1秒字重設定到600

span:hover {

    font-variation-settings: 'wght' 600;

    transition: .1s;

}

 

透過以上五個步驟及CSS的設計,就可在網頁上以文字輕鬆、快速的呈現出動態效果來。在現在的桌機和移動設備上主要的瀏覽器大都已支援可變式字體的顯示,支援的瀏覽器版本整理如下表,因此,我們可以期待,透過更多可變式字體產品的推出,網頁的面貌將在互動設計師與網頁工程師攜手下,帶來許多的視覺觀感體驗。

 

Web browsers

   

Chrome

62+

Safari

11+ (requires macOS 10.13+)

iOS Safari

11+

Firefox

62+ (requires macOS 10.13+)

Edge

17+

Opera

49+

Samsung Internet

8.2+

 

如果對於可變字體在網頁CSS動態效果的設定有興趣的話,下方網址有更多中文可變式字體套用Web CSS設定的使用範例。

https://ifontcloud.com/index/variablefont_demo.jsp

 

文鼎網頁字型方案

https://ifontcloud.com/index/plan.jsp