增加網站排名的祕密武器

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

文鼎DC陳森田MORITA

文鼎DC陳森田MORITA是文鼎字型與插畫家_陳森田合作開發的手寫字型,所有字體的內容包含中文、英歐文、符號等,都是陳森田手寫繪製,再由文鼎字型作數位化產品設計,產品同時涵蓋繁體中文、簡體中文。

陳森田MORITA_B體將漢字定距字與調和字整合在一個字型檔案裡,讓,森田手寫字的手感、Q感及溫度可以呈現出來。使用者透過字型選單選擇適合情境的字型做應用。

 

本影片透過Adobe Illustrator來呈現文鼎DC陳森田體的使用方式,演示漢字定距與漢字調合設計排版上視覺的不同。

應用設計

Products and Applications

文鼎字型關於字距的產品規格與應用

若是文鼎字型的鐵粉,有沒有發現近幾年文鼎的字型產品,在安裝後於軟體使用時,在字型選單列裡會出現另一組字體名稱幾乎一樣的字體,仔細一看,差別在於另一組字體名稱中多了「P」、「F」的代號。

 

幾年前,文鼎公司在與外部設計師交流的過程裡,不止一次聽過這樣的聲音,大致是這樣:在文章排版遇到中文全形符號的時後,常常需要花許多時間來調整個別符號的字間距,以免過大的白空間影響著版面閱讀的舒適度。

 

另一方面,真跡手寫數位字體的特色,除了字體造型外,每個字元的寬度、大小也不盡相同,我們將這樣的手感溫度帶入數位字體,讓每個字元在透過軟體排版後,仍然散發著人真人手寫的感受;然而,同時間字體也需要考量不同載體、軟體的相容度,這些都是在字體設計過程中字元規格的設計,連動到字體使用端文字間距調整的情境。

 

近幾年文鼎字型產品,如在印刷排版常會使用到的明、宋、仿宋、楷、黑、圓這幾類的字型產品,而且應用上,會在內文情境出現的字重規格,這些因素下,字型產品就會以TTC(TrueType Collections)的字體格是製作,裡面包含標準規格的漢字、符號以及有對常用39個中文全角符號進行調和(Proporitional)設計

的字型,這些有調整常用39個中文全角符號的字型,在字型選單列表裡,名稱中就會多了「P」這個代號,以下以文鼎書苑宋體為例。

 

而真跡數位化活潑風格的產品的情境剛好相反,通則上,以還原設計師寫字稿時字元的寬度為預設值,此時字元在排版上會呈現文字寬度擬真、有書寫韻律感的視覺效果;在兼容不同軟體對讀取字體的考量下,另外將真跡數位字型漢字的字寬,刻意的做等距的規格,在字型選單列表裡,名稱中就會多了「F」這個代號,以下以文鼎DC陳森田MORITA為例。

 

 

這些字型產品如果在Adobe軟體裡使用,要特別注意字元面版中「設定兩個字元之間的特殊字距」這個設定,若選到視覺,則文字會依Adobe的機制,根據字元的形狀自動調整選取字元間的間距。

Products and Applications

字型名稱New一下

哆啦A夢的前身是小叮噹,高雄的舊名叫打狗,在你我日常周遭也有不少因為時代背景不同,而改變念法,但他們的本質是不變的,都是在陳述同一件事物,文鼎的字型名稱是否也有類似的情形呢?答案是有的,讓我們繼續看下去…。

早期市售的字型,多半是以光碟片實體的方式提供給購買者做使用,但因時代的變遷,很多科技產品販售的方式都改為線上作業,進而取代了以往實體的光碟片安裝。文鼎目前有上千套字型,服務使用者搭配iFontCloud字庫管理工具做使用,但身為資深文鼎老粉的朋友們,是不是在光碟片字型轉換成雲端字庫字型時有著一些疑惑呢,例如:之前使用的”文媛中圓”為什麼在iFontCloud購買的網頁上沒有看到之類的聲音,我們聽到您的聲音了,文鼎在iFontCloud網頁上加強了這一類字型的搜尋,現在只要在搜尋的地方打上早期舊字型名稱的關鍵字或完整名稱,就可以輕鬆地找到現在新對應的字型名稱,使用者可以安心的使用。

舉例:在iFontCloud網站上”字型搜尋”輸入舊字型名稱如:文媛,即可找到相對應的”文鼎圓體”


相對於早期的字型產品,目前對應新字型的內容會有以下變動:

  1. 拉丁符號造型的優化與字間距調整
  2. 瑕疵、錯誤修正

整體而言,文鼎字型產品不會隨著時間的流逝而逐漸凋零,而是與時俱進透過雲端的方式做產品更新以及服務使用者。文鼎也提供了新舊字型名稱對照表,以提供大家在對應上的方便性,煩請點選下方連結下載:新舊字型名稱對照表