增加網站排名的祕密武器

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

如何快速在軟體中找尋文鼎字型?

電腦安裝太多字型,每次都要花很多時間從頭開始,卻還是找不到要使用的字型,令人覺得頭痛,再加上不同軟體讀取字型名稱的方式不同,有時候明明安裝中文字型,但是字型清單顯示的卻是英文字型名稱。

 

以下我們以在台灣使用繁體中文介面的Windows作業系統說明如何在軟體中找到文鼎字型。

文鼎字型的中文名稱大多以「文鼎」這兩個字開頭做顯示,英文則是「AR」,在iFontCloud文鼎雲字庫網頁或iFontCloud字庫管理工具中有提供字型的中文和英文名稱,讓您清楚知道字型的名稱,搜尋字型更容易。

常用的Office 軟體,如:Windows 2013 word、Excel和PowerPoint,在顯示字型的下拉選單中,輸入字型名稱的第一個字「文」或「AR」即可快速到達相同名稱字型的位置,此時點開下拉選單就能更換為其他字型。這裡有一個字型語言及作業系統語言的變數要注意一下,一般來說,繁體中文字型名稱大多為中文顯示,而簡體中文的字型名稱則為英文;如果作業系統是是Windows簡體中文版,則規則相反,繁體中文的字型名稱以英文顯示,簡體中文字型名稱則是中文。

而設計師常用的Adobe系列軟體,在Photoshop、Illustrator中,繁體或簡體字型的字型名稱都是用中文顯示。在字元視窗中,輸入任一字型的名稱關鍵字後,Adobe的字型運算機制即會將該關鍵字相關的字型列出,這樣就加快了使用者找字的效率。倒是要特別題一下,在InDesign裡,若在繁體中文的作業環境,簡體中文字型是以英文的字體名稱做顯示。

從上方簡要的說明,我們可以這樣說,在字型公司的字型工程做業端要兼顧到字型使用的各個環節,確保在任何環境上字型產品都能被正確的顯示與使用到,這確實是一件專業的工作,也是整體造字工藝中重要的一環。

Products and Applications

「iFontCloud」APP操作解說

操作步驟

1. 登入iFontCloud會員帳號

 

2. 進入到字體清單頁面

 

3. 輸入關鍵字或用條件搜尋字體

     

 

4. 安裝字體

 

5. 字體安裝完成後,開啟有支援custom fonts的APP使用

支援安裝custom fonts的APP

  • Pages
  • Keynote
  • Numbers
  • Draft
  • Notebook
  • Noteshelf
  • GoodNotes
  • Adobe Photoshop
  • Adobe illustrator
  • Clip Studio Paint
Products and Applications

文字排版在字體加粗的應用

在10年前,我們應該很難想到現在字體的使用,也會像聽音樂一樣,線上訂購、跨裝置、隨買隨用,目前,這樣的字體訂閱服務機制,可以讓使用者使用到大量的字體,而在選用字體的時後,各家服務機制都有提供簡易的篩選功能,使用者依據自身的需要,從上千套字體中快速的找到符合需求的字體造型來做使用。

 

在應用上,我們以幾個例子來演示字體加粗/粗體的使用建議。在Windows的使用環境中,文書處理的首選絕大多數想到應該是Microsoft Office系列的軟體,繪圖設計則是illustrator,這對於大多數的文書處理使用者、設計師來說,這絕對是一時之選。

 

但是,我們認為在這兩個軟體中,字體加粗的使用情境有一個可以增加字體閱讀舒視度的小方法,即是多字重、多橫筆粗度的字體應用彈性。下圖方框中的部分是Microsoft Word字體加粗的機制,一般來說,這是透過程式演算的機制產生出來的,對於中文漢字顯示效果的支援較差,在筆畫相對複雜的字元上,就會出現筆畫因空間過於接近而產生沾黏的現象,即便是專業的繪圖軟體illustrator,透過外框的機制也是呈現出不佳的視覺效果。

 

現在大部分的字體在開發設計時,多會以朝多字重的方向做規劃,這個情境下,就可發揮多字重字體的使用彈性了,以文鼎UD晶熙黑體為例,如果我們以Medium這個字重當作內文排版使用,那我們會建義需要做加粗的部分,可以往上跨一個粗度,即使用Bold作為加粗後字體呈現的選擇,以此類推,這是我們對於文鼎UD晶熙黑體在加粗屬性的建議,可以作為排版的使用參考。

另外,在明/宋體的造型上,我們以文鼎書苑宋Display字體家族做演示,字重相同為Heavy,文鼎書苑宋DisplayH16 Heavy的有著輕盈的視覺感受,如果我們需要一個加粗的效果,在Word使用Blod屬性或illustrator外框加粗,得到的都是一個暴力加粗的結果,如果我們嘗試選擇文鼎書苑宋DisplayH62 Heavy,我們依然得到一個加粗的效果,但與程式暴力加粗的效果對比,字體結構不至於變形,視覺感受也相對來的優雅起來。

多字重、多橫筆粗度字體家族的設計,能夠帶給設計師排版上的選用彈性,透過細膩的選用技巧,可以讓字體排版時不再受限於軟體的限制。