增加網站排名的祕密武器

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

iFontCloud實體卡開卡介紹

在” 如何合法取得文鼎字型”中有提到的實體卡,可能會有很多人好奇,甚麼是實體卡,又要去哪裡購買,文鼎雲字庫除了透過iFontCloud網站上購買外,也可以透過經銷商展碁的通路購買文鼎雲字庫實體卡來使用字型。

如果購買實體卡的用戶不太清楚要如何開啟,今天這篇小文章就來帶大家一起透過實體卡,來啟用字型服務方案。

 

Step1實體卡上,將序號刮出會取得一組序號

Step2 開啟瀏覽器連線治 序號啟用網址https://ifontcloud.com/index/arphic_card.jsp

Step3 輸入序號成功後,如果有帳號即可立即登入,如果不是會員可先建立帳號

Step4驗證成功後會跳出輸入授權對像填寫畫面,請填寫完畢送出

Step5完成授權對像填寫後,可下載安裝字庫管理工具

Step6 完成字庫管理工具安裝後,登入帳號密碼

Step7 登入後,可到”訂單資訊”查看您的訂單並點擊啟用,即可完成訂單啟用

Step8 可到”我的字體”在想套用的字型”點擊安裝”即可套用字型

照著以上的步驟,大家是否對實體卡有更進一步的了解,如果在操作上有問題,歡迎大家詢問,文鼎專業的客服團隊,會為您做詳盡的答覆。

 

Products and Applications

iFontCloud教育方案與教育資格介紹

一般商用與教育教學、設計學習所需要使用的字體類型不太相同,小學教師需要製作注音和拼音的教材,設計學系學生需要繳交報告與作業,為將來的設計大道鋪路。文鼎以教學和教育學習出發,設計了兩種教育方案,分別是「繁/簡多元學習包」和「美感學習包」。
 

繁/簡多元學習包:包含常用的繁/簡字型、注音拼音字型及英歐文字型。

美感學習包:包含設計學系所最常使用的明、黑、圓的經典字型以及經典的書法字型及英歐文字型 。
 

請先註冊iFontCloud會員,購買教育方案產品需符合資格證明,並提供相關證明文件才能購買,證明文件(需含學年度)包含:

  • 學生證正反面(需蓋上註冊學年章,未蓋章不具證明效力)
  • 學期成績單
  • 學期繳費通知單
  • 教師證明
  • 其他任何內容登載您的姓名、機構名稱及在學日期或學期的教育文件

 

需將上述文件寄到ifontcloud@arphic.com.tw,經過文鼎審核通過後才可購買教育版產品,可購買期限為6個月內。教育方案不提供續約服務,次年如果需要再次購買教育方案,需重新提供文件審核。iFontCloud教育方案是以教育學習或是教學為目的,使用範圍不得以公司營利或銷售為目的使用!

 

iFontCloud教育版租賃字型授權範圍

如需更詳細內容,可參考教育版授權書範本

 

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