我的網頁為什麼會眨眼

2019-04-25 15:03:03.327

分類: Font Technology

一招教你搞定WebFont網頁瞬閃問題

如果你的網頁使用了Web Font,你可能或多或少會收到網站的使用者告訴你:欸,為什麼你的網頁字會閃一下?這時,你可能納悶什麼叫做閃一下,開了網頁後,卻又沒看到使用者描述的狀況。這其實是CSS加上網路速度的問題:在還未將Web Font字型下載完成前,會先以系統預設字型顯示頁面,等到下載完成才套用到已顯示在瀏覽器的字型上。也因為如此,如果瀏覽網頁的電腦網路不夠快,可能會發生已經頁面載入完畢了,Web Font的內容隔了1~2秒才接著載完並套用,此時,就會發生所謂的「眨眼」現象了。

這樣的問題,我們可以透過加入以下CSS的方式,告訴網頁在確認Web Font狀態前,就算頁面內容載入完畢,也先將文字隱藏起來,直到確認了Web Font的狀態後,再將文字顯示,這樣就可以避免瀏覽網頁時出現文字瞬閃了!

 

code
.arwf-loading body { /*Web Font正在載入中,不顯示文字*/

          opacity: 0;
          visibility: hidden;
}
.arwf-active body { /*Web Font處理成功,直接顯示文字*/
          opacity: 1;
          visibility: visible;
}
.arwf-inactive body {/*如果Web Font處理失敗,直接顯示文字*/
         opacity: 1;
         visibility: visible;
}


Font Technology

微字型

文鼎公司關注到字型產品除了設計上創意的專注外,也考量到應用面用字的需求,如小字號文字閱讀的清晰度、辨識度。

一款字型產品是如何的被決策出來做量產的,首先要評估的是產品會被用在哪裡?決定了使用目的,依情境定義使用字號(font size),有了這些後,才會有後續的設計規格的延伸。回到設計師的字體應用情境,在執行設計案件時,字型對於設計師來說是眾多設計素材之一,但在資訊訊息呈現,字型一定是一個重要的選擇。文鼎公司關注到字型產品除了設計上創意的專注外,也考量到應用面用字的需求,我們看到了字型在設計上被使用在小字號的需要,也看到了閱讀上,小字號文字清晰度、辨識度上的重要性,因此在字體設計與造字工程上進行整合,開發出一系列專屬使用在小字號情境的微字型產品。

在鉛字印刷時代,每個字號鉛字有著固定的物理大小,我們以築地明潮體舉例,可以看到上方的那排是築地明朝初號到六號放大到一致大小的情況,下方是文鼎上海宋實際使用大小的示意圖,透過觀察,用於內文小字的六號字(8pt)與標題大字的二號字(21pt)兩者在筆畫細節處有著設計的差異,以筆尾末端的設計為例,因為二號字呈現的字號較小,因此需要稍微加重筆尾的厚度,使其在顯示時不至於虛掉、灰掉,而用於大字的二號字,是要清楚呈現明體的特徵,因此做較細緻的設計。這是早期鉛字在設計上考量實務用字大小所做的設計因應,但數位字體使用的媒介與情境與以往有很大的不同,特別是向量字可以任意縮放大小的特性,這絕對不是鉛字可以比擬的;然而若是使用在如六號字(8pt)的大小,字體是否還可以清晰地呈現呢?

以文鼎UD晶熙黑體為例,雖然晶熙黑在設計之初,已經考量印刷、螢幕顯示的使用,但因漢字筆畫多、寡的對比情況在極小字的使用情境下,仍然會有糊字影響到視覺效果,以下圖左右兩邊的對照來看,右方的微字型與左邊標準版的晶熙黑體,在閱讀視覺上所形成的跳躍,已經明顯的降低。

微字型產品是如何達到這樣的效果呢?關鍵是設計師將漢字由筆畫多寡由少至多作排序,透過設計師與工程師的合作,筆畫少的字元,不改變筆畫的粗細,筆畫多的字元,依視覺灰度做筆畫粗細漸進的調整,來達到小字顯示時降低糊字的情形,因此,微字型的產品特別適用在3-8P的環境,相對的,若是標題以上的大字號顯示,則建議選用標準版的產品。

下圖是由美可特品牌企劃設計應用文鼎UD晶熙黑體微字型所設計的面膜包裝,我們將重點放在背後的用字上,回到字型選擇應用面的考量,透過畫面,我們可以感受到這些字的使用size是很小的,如何在小字保有清晰的顯示,是這個案件選用微字型產品的要點。

 

目前已經開發完成的微字型產品,造型為經典的黑體與圓體,語言包含繁體中文、簡體中文,其中文鼎UD晶熙黑體微字型產品支援Unicode 3.0 及GB 18030大字集的規格,降低設計師在排版缺字的機率,提升使用感受。繁體中文晶熙黑體微字型也將長體字型納入,排版上有利於有空間限制的版面容納較多的文字資訊。微字型產品的推出獲得了設計師的肯定,未來也會持續開發將新的微字型產品,想要了解詳細文鼎微字型產品的支援情況,歡迎前往文鼎iFontCloud瀏覽。

 

點我前往>文鼎iFontCloud_微字型

 

Font Technology

OpenType 1.9規格支援彩色漸變向量字型

OpenType規格上一次重大的變更是在2016年9月釋出的1.8版本,它加入了可變式字型(Variable Font)的規格,至今5年已有許多可變式字型推出上市,有些訂製字型專案客戶也會要求提供可變式字型,不過台灣的字體廠商只有文鼎有發行可變式字型產品。

2021年12月OpenType 規格再次重磅更新¬釋出1.9版本,其中最主要的是對彩色漸變向量字型的支援(縮寫為COLRv1)。以下為讀者做簡要的介紹:
(1) OpenType色彩定義表(COLR)內的顏色從原本的單一顏色擴充為可以有漸層的變化,以下範例可以很明顯地看出兩個規格版本的色彩差異:

COLRv0:

COLRv1:


(2) 另外,在COLR表的前一版COLRv0雖然也支援可變式字型(variable font),但只是字符外框可變,對於字符定義的顏色是不可以變更的;而COLRv1版本就有支援顏色可變的功能,可以在可變字體中加入調整顏色的變數軸。國外的underware字型設計公司已在2022年初發表了一組顏色可變的字體Plakato Color

由於此新的技術規格才剛發表,一般編輯軟體都尚未支援,截至此文編輯時,已支援COLRv1的應用軟體只有Chrome核心的瀏覽器,預期其他主流的瀏覽器及編輯軟體也會很快的支援這種炫彩的COLRv1彩色漸變向量字型。也可期待市場上會有更多的彩色向量字型,特別是Emoji表情符號,可以讓用戶選擇使用。
 

參考資訊:

Font Technology

文鼎UD晶熙黑體 TTC格式產品說明

TrueType Collections (TTC)允許將多個性質相近的字型合併為一個檔案,其目的是為了節省字型檔的資料量。以繁體中 文UD晶熙黑為例,針對43個常用全角符號做調和(Proporitional)設計,分別放在兩個不同的字體名稱上,使用者可以依 自己的喜好及需求,選擇常規的全角符號字型或是有標示P的常用全角符號調和設計產品。這兩套不同名稱的字體可以 合併成TTC,漢字和部分符號可共用,只要增加39個調和符號的資料量。合併後的TTC字檔和分開成兩個TTF字檔效果一 樣,卻可節省95%以上的資料量。

在我們對設計師的訪談中,我們聽到一個聲音,有設計師認為在進行長文排版時,全角位符號的字寬常常出現一些尷尬 的排版問題,如川流(river)、凸排等,影響著整體的閱讀感受。在理解設計師的困擾後,我們挑選了39個中文常用全角符 號,進行字寬調和(Proporitional)的設計,有此設計特點的產品,在字體名稱上都會多一個「P」,代表Proporitional的代 號。

以文鼎UD晶熙黑體E1HK字體為例,使用者在安裝字體後,在字體選單中會看到「文鼎UD晶熙黑體E1HK」與「文鼎UD晶 熙黑體PE1HK」兩個字體名稱,這是因為文鼎UD晶熙黑體E1HK字體檔案使用了上方描述的TrueType Collections (TTC) 的機制而呈現出來的結果。

 

下圖為文鼎UD晶熙黑體E1HK 產品使用常用全角符號及常用全角符號調和設計的排版示意圖,選用經過符號調和設計 的字體,排版後漢字、符號呈現出較佳的字寬比例,將有助於段落文字訊息閱讀的舒適性。