如何將可變式字體使用於網頁上

2021-08-24 10:29:22.0

分類: Products and Applications

時間在2016 年底,Microsoft、Apple、Adobe、Google聯合發佈了OpenType 1.8 可變式字體Variable Font。

 

一個可變式字體檔案可以包含傳統靜態字體家族中的每一個字體。如果使用者端在字體有使用到兩個字重以上的情境,基於可變式字體技術的特性,字體的檔案資料量是可變式字體的一個優勢,我們以文鼎UD晶熙黑體G30字體為例,如果設計案件需要使用5個字重、4個字寬這樣龐大的字體家族,那麼總共20個字體檔案約有160MB,但若採用可變式字體,則僅需20MB,足足減少了87.5%的檔案資料量。

更好的是,設計師和工程師還可以幾乎不受限制的使用可變式字體中的變化。例如字重與字寬的變化,使用者可以在Medium、Heavy或與長體Condensed間透過變數軸或參數的調整自由穿插的使用字體。隨著可變式字體的推出與應用軟體的支援,我們可以預測到可變式字體使用上的好處:為網頁/UI工程師在多字重字體資料量提供更好的壓縮,為設計師在作品上提供更細膩的呈現,以及為讀者提供更精緻的閱讀體驗。

 

可變式字體在2016/11月發佈後,最早支援可變式字體的主要設計軟體是 Adobe Photoshop、Illustrator 和 InDesign。如今,這些軟體內建了多款英文可變式字體,因此,現在數百萬使用 Creative Cloud 的設計師都可以體驗到可變式字體這種新的排版潛力。

 

使用情境如果移轉到Web呢?我們先來體驗一下吧!將滑鼠經過下方文字,看看會有怎樣的效果~

 

這個效果都是可變式字體透過CSS的設定所設計出來的互動呈現,我們分解成5個步驟:

1. 設定Web Font

於網頁內嵌入Web Font JS

 

2. 準備好小篇幅文章,設定於網頁內

例如文字為『文鼎晶熙黑』,將文字用<span>分別組合起來並放入網頁內<span>今</span> <span>晚</span> <span>我</span> <span>想</span> <span>來</span><span>點</span>

 

3. 設定字型名稱\

span {

    font-family:'文鼎VF甜妞體_Wr';

}

 

4. 設定動畫呈現

預設文字字重為 300

span {

    font-variation-settings: 'wght' 300;

}

 

當滑鼠移到文字上時,將字重設定為 600

span:hover {

    font-variation-settings: 'wght' 600;

}

 

5. 加入一些進場、退場效果

設定3秒回到原始字重300

span {

    font-variation-settings: 'wght' 300;

    transition: 3s;

}

 

設定0.1秒字重設定到600

span:hover {

    font-variation-settings: 'wght' 600;

    transition: .1s;

}

 

透過以上五個步驟及CSS的設計,就可在網頁上以文字輕鬆、快速的呈現出動態效果來。在現在的桌機和移動設備上主要的瀏覽器大都已支援可變式字體的顯示,支援的瀏覽器版本整理如下表,因此,我們可以期待,透過更多可變式字體產品的推出,網頁的面貌將在互動設計師與網頁工程師攜手下,帶來許多的視覺觀感體驗。

 

Web browsers

   

Chrome

62+

Safari

11+ (requires macOS 10.13+)

iOS Safari

11+

Firefox

62+ (requires macOS 10.13+)

Edge

17+

Opera

49+

Samsung Internet

8.2+

 

如果對於可變字體在網頁CSS動態效果的設定有興趣的話,下方網址有更多中文可變式字體套用Web CSS設定的使用範例。

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

 

文鼎網頁字型方案

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

 


Products and Applications

[文鼎 IN-HOUSE]感恩購物節❤️

 

                                        

            

[ 文鼎 IN-HOUSE ]

            

結合科技趨勢,文鼎字型全新推出的字體應用專欄
            結合人工智慧生成技術圖像(Midjourney)與節慶活動
            每期推出不同內容,
            並且附上生成程式碼讓創意使用者在面對不同專案下更能得心應手

            

期待與你共同探索設計的新可能

            

 

 

本期內容圍繞「端午節」為主題,提供字體應用上的參考


  


                                                                       

/Imagine prompt
            
            A high fashion photoshoot featuring traditional Chinese zongzi, made from dried green bamboo leaves and tied with hemp rope into triangular shapes, containing a salted egg yolk, glutinous rice, and a small piece of preserved pork, on a tea party table with a burnt orange tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style incorporates schlieren photography and Anne Dewailly's techniques, with soft-focus portraits. The image is hyper-realistic, glamorous, insanely detailed, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0--s 50

 

                                                                       

/Imagine prompt
            
            A detailed and glamorous high fashion photoshoot of zongzi, traditional Chinese pack zongzi, on a table set out for a tea party with a burnt orange tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style includes schlieren photography and Anne Dewailly's work, with soft-focus portraits. The image is hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

                                                                       

/Imagine prompt
            
            A detailed and glamorous high fashion photoshoot of zongzi, traditional Chinese pack zongzi, on a table set out for a tea party with a burnt orange tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style includes schlieren photography and Anne Dewailly's work, with soft-focus portraits. The image is hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. -ar 2:3 --v 6.0 --s 50

 

                                                                       

/Imagine prompt
            
            A detailed and glamorous high fashion photoshoot of zongzi, traditional Chinese zongzi made from dried green bamboo leaves and tied with hemp rope into triangular shapes,on a table set out for a tea party with a burnt orange tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style includes schlieren photography and Anne Dewailly's work, with soft-focus portraits. The image is hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

                                                                       

/Imagine prompt
            
            Glamorous high fashion photoshoot of traditional Chinese zongzi, made from dried green bamboo leaves, tied with hemp rope, containing salted egg yolk, glutinous rice, and preserved pork. Set on a table with a Tiffany blue tablecloth for a tea party. Inspired by Wes Anderson's vintage color palette, with schlieren photography and Anne Dewailly's work. Soft-focus portraits, hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

                                                                       

/Imagine prompt
            
            A detailed and glamorous high fashion photoshoot of traditional Chinese zongzi, made from dried green bamboo leaves and tied with hemp rope into triangular shapes, containing a salted egg yolk, glutinous rice, and a small piece of preserved pork, on a table set out for a tea party with a Tiffany blue tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style includes schlieren photography and Anne Dewailly's work, with soft-focus portraits. The image is hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

                                                                       

/Imagine prompt
            
            Detailed high fashion photoshoot of traditional Chinese zongzi, wrapped in dried green bamboo leaves and tied with hemp rope, containing salted egg yolk, glutinous rice, and preserved pork. Displayed on a tea party table with a Tiffany blue tablecloth. Inspired by vintage Wes Anderson color palette, using schlieren photography and Anne Dewailly's work. Soft-focus portraits, hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

                                                                       

/Imagine prompt
            
            Detailed high fashion photoshoot of traditional Chinese zongzi, wrapped in dried green bamboo leaves and tied with hemp rope, containing salted egg yolk, glutinous rice, and preserved pork. Displayed on a tea party table with a Tiffany blue tablecloth. Inspired by vintage Wes Anderson color palette, using schlieren photography and Anne Dewailly's work. Soft-focus portraits, hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

                                                                       

/Imagine prompt
            
            Detailed product photography of a large green square box with 28 embedded small square boxes, floating on water with a mirror-like texture and a layer of fog. Background includes a green wall, slight water lines, and bamboo stands for spatial depth. Naturally bright lighting. Features traditional Chinese zongzi, wrapped in bamboo leaves and hemp rope, triangular shape. Canon camera, epic details, high precision, ultra high definition extreme detail texture 8K. --ar 2:3 --v 6.0 --s 50

 

                                                                       

/Imagine prompt
            
            Product photography featuring a large green square box with 28 small square boxes inside, placed on water with a mirror texture and fog layer. The background has a green wall, slight water lines, and bamboo stands. Naturally bright, rich light, central composition. Traditional Chinese zongzi, wrapped with hemp rope and bamboo leaves in a triangular shape. Shot with a Canon camera, epic details, high precision, ultra high definition extreme detail texture 8K. --ar 2:3 --v 6.0 --s 50

 

 

下一期
你希望我們做什麼內容,歡迎告訴我們
 

Products and Applications

如何解決在Word使用Adobe Acrobat轉存PDF失敗的問題?

在使用Microsoft Word編輯文件時,為了讓文件維持編輯時的排版樣式,通常我們會採用將檔案轉成PDF的方式做保存。但是,從word透過Adobe Acrobat轉存成PDF時,在存檔是不是有遇過跳出錯誤的log訊息?該怎麼解決?

會出現這樣的log訊息,是因為Acrobat在轉存PDF的過程中,找不到文件中使用的字型。我們以在windows作業系統下,在word文件使用iFontCloud雲端字型服務的情境來做說明,iFontCloud雲端字型服務所使用到的字型,其存放位置並非一般認知的 C:windows/Fonts的目錄中,其與過往將字型安裝在系統上的行為不相同,因此造成Acrobat在轉存PDF時出現找不到字型的情況。

 

我們以Acrobat有提供的方式,為大家解決這個轉檔問題,簡易的操作2個步驟,使用word的Adobe Acrobat存成PDF就能成功囉!

1. 點選「列印」>「印表機內容」

2. 取消勾選「僅依賴系統資型;不使用文件字型」

 

取消勾選使用系統字型之後,word使用雲端字型轉PDF就不會出現錯誤訊息log。

備註:此篇文章撰寫時間為2021年5月。不保證未來Adobe Acrobat更新或新版本有支援此功能

Products and Applications

在Word轉存pdf時,無法顯示粗體

使用Microsoft Word做文書編輯是日常中再正常不過的一件事,但是將文件編寫完成後,做樣式、段落的排版後,想要輸出PDF檔,卻遇到本來該加粗的文句卻無法顯示粗體的困擾嗎?

這樣的情況有幾個事件可以做探討:

  1. 使用Word提供的加粗功能是否合宜?
  2. 在Word編輯後,轉存PDF的方式?

下圖是Word工具列截圖的畫面,本文說明的重點在「B」這個圖示「將文字變成粗體」的功能。在Word中使用「B」圖示做文字加粗為Word軟體中提供的功能,但此加粗是透過程式計算的方式,將文字做粗體的顯示,嚴謹來說,相信字體設計師一定不喜歡這樣的加粗效果,但這樣的功能有其一定方便性與經濟性(不用特別再買一個粗體字來做粗體效果)



透過程式計算機制的字體加粗效果,其在字元架構的美觀性遠不如經過設計師微調筆畫空間後的成果,若在講究文字排版細節時,我們會建議選擇同字體家族較粗的字型來自為字體加粗效果的選項。以文鼎字型的字重單位為例,若是使用Medium字重做為內文排版,則加粗效果的字重建議為Bold,若是使用Demibold字重做為內文排版,則加粗效果的字重建議為Extrabold,也就是跳一個字重單位的方式來做使用。


回到本文的問題,若在Word文件編輯後,使用另存新檔,執行儲存PDF檔案的動作後,卻發現原本該有的文字加粗效果在PDF文件重無法呈現?這是哪裡出了問題呢?

這與Word軟體的以及字體產品工程的設定有關係,在字體產品工程的設定中,有一個「OS/2 table / WeightClass」的設定,當字體在這個欄位的設定值與Word不一致時,就會出現在轉存PDF無法顯示字體加粗的效果,此時,若有訂閱Adobe的使用者,使用「儲存為Adobe PDF」或「列印成PDF」一樣無法解決文字加粗效果無法呈現的問題。

這樣的情況,根本的問題解決方式為文章上方所建議,透過使用相同造型的字體家族,選用較粗的字重來排版,以徹底解決文字無法加粗的困擾,並達到加粗後的字體有最佳的顯示效果。



附註:
Microsoft 對於PDF加粗的回應:Bold font is not shown in pdf output from word
Adobe對於PDF加粗的回應:One of my fonts not in bold when making a PDF