增加網站排名的祕密武器

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

可變式字型variable font在設計上的應用,以明/宋體為例

可變式字型(variable font) 發佈於2016年,發佈至今,我們觀察到許多字型設計公司逐漸地發布自家的可變式字型,經過這幾年的推廣,最近我們從問卷調查上發現國內的設計師對這樣的產品仍然感到陌生,今天,我們藉由幾個演示,再一次讓大家認識可變式字型。

 

可變式字型的特色在於可隨使用者的設定或是依應用程式的自動判斷,變化出將近無限種的字體屬性組合。只需要一個字型檔案,就可以無間段調整該字型提供的字重、字寬或對比等可變屬性,讓設計師用字的創意不再受侷限,同時也減少了龐大字體家族所需要的大量記憶體空間。

 

不知道大家有沒有思考過一個問題,字體設計師都是在60公分距離前的螢幕做字體設計,使用時,有可能近到20公分,遠則超過5公尺以在使用的字體,這樣的應用情境,字體的設計如果都一樣,合理嗎?設計師如果在用字的時後,思考到這樣層次的問題,有沒有產品可以上設計師挑選使用呢?

 

通常在進行字型開發前先會決定使用目的,而在選用字型時,會依情境來選用造型,在使用明/宋體這類的字型時,通常橫向筆畫的粗細是固定的,在可變式字型裡,可以將橫向粗細的變化設計在可變式字型的變化軸上,使用者除了傳統的字重外,還可以使用到橫向筆畫(對比/Contrast)變化軸的調整。下方以文鼎書苑宋體書苑宋作為舉例,因應複雜化的使用情境,書苑宋設計了四個橫筆粗細的產品,為橫筆寬度16(EM Square =1000 ) 到62 的響應式設計,使用者可依據使用配方建議,從內文到標題,從紙本到屏幕,因應不同情境選取適當字型使用。

 

有個多個橫筆粗細對比這樣的產品,我們思考一下,如果在設計這樣的指示標示,怎麼樣可以讓閱讀訊息用的字體在畫面上呈現的更好呢?畫面上『南京三民站』這幾個字分別使用思源宋體(上)與文鼎書苑宋體(下)做展示,我們可以看到這五個字元筆畫數並不算多,但『三』這個字的筆畫相對起來特別少,整體看起來視覺灰度少了一級。

這時候如果我們要對他加粗,通常的作法就是在AI裡轉外框,加筆畫,但這樣一來,字就變成圖,不是字了,會增加後續版本維護的困擾。使用書苑宋可變式字型的微調後的成果,我們來看看調整前後的差別,經過適當的調整後,每個字元的視覺量感變得更平均了。

我們認為,設計師寶貴的時間應該要用在設計思考上,如果字體可以協助設計師解決問題,節省設計師的時間,那就是我們對設計產業的幫助。關於更多可變字型的資訊可參閱下方文鼎iFontCloud雲字庫的展示說明

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

Products and Applications

哪些系統、瀏覽器和軟體支援可變式字型(Variable Fonts)?

可變式字型(Variable Fonts)是OpenType字體格式的一種,從2016年發佈至今,與以往的字型檔案的使用經驗不同,只需安裝一個可變式字型(Variable Fonts)檔案,即可使用該字型定義的可變屬性,如字重(weight)、寬度(width)、傾斜(slant, italic)、光學尺寸視覺調整(Optical size)等,變化出一套完整系列字體,不再需要安裝10幾個字型檔案,大幅減少安裝字型套數且有效降低字型檔案大小。

 

可變式字型(Variable Fonts)讓設計師的設計帶來更多的變化,透過彈性的微調字型細部參數,打造出專屬的字型樣式,讓作品更具有視覺吸引力。

 

可變式字型(Variable Fonts)使用需要在支援可變式字型(Variable Fonts)的作業系統與軟體中使用。以下列出各作業系統、瀏覽器和軟體最低支援版本。

 

作業系統

作業系統顯示可變式字型(Variable Fonts)是用字重加樣式方式呈現

作業版本 最低支援版本
Windows 10 1709
macOS 10.13

 

瀏覽器

瀏覽器支援顯示可變式字型(Variable Fonts)的變軸設定(Weight、Width、Italic、Slant、Optical Size),如何將可變式字體使用於網頁上可參考下方應用新知連結中的文章https://ifontcloud.com/index/newknowledge_detail.jsp?id=89

瀏覽器 最低支援版本
Chrome 66
FireFox 62
Safari 11
Edge 17
Opera 53
IE 不支援

 

手機瀏覽器 最低支援版本
iOS Safari 11(需使用iOS11)
Android Chrome 93(需使用Android OreoAPI version 26)
Android Firefox 92(需使用Android OreoAPI version 26)

 

 

軟體

可以利用可變式字型檔案量小,但透過變數軸的調整,為您的作品提供更多的字體面貌。

軟體 最低支援版本
Adobe Illustrator CC 2018 (201710)
Adobe Photoshop CC 2018 (201710)
Adobe InDesign CC 2020(201911)
Sketch
59
Microsoft Word
Office 365
Apple Pages
11.1
Apple Keynote
11.1
Apple Numbers 11.1

 

部分軟體如MS Office 365 Word、Apple Keynote,未完全支援可變式字型的使用,但是使用者仍可使用到可變式字型預設的字型實例,如下圖

 

Windows Office 365 Word

 

Mac Office 365 Word

 

Apple Keynote