用心織就每個感恩時刻，於字裡行間刻畫溫暖，在這個充滿暖意的季節裡，以真誠傳達專屬於你的感謝與驚喜。
本期內容圍繞「感恩節」以及「購物」為主題，提供字體應用上的參考。
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]端午節篇](https://ifontcloud.com/index/images/newknowledge/端午節Image.png)
Products and Applications
[文鼎 IN-HOUSE]端午節篇
[ 文鼎 IN-HOUSE ]結合科技趨勢，文鼎字型全新推出的字體應用專欄 期待與你共同探索設計的新可能 |
本期內容圍繞「端午節」為主題，提供字體應用上的參考
下一期
你希望我們做什麼內容，歡迎告訴我們
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 Oreo：API version 26) |
| Android Firefox | 92(需使用Android Oreo：API version 26) |
軟體
可以利用可變式字型檔案量小，但透過變數軸的調整，為您的作品提供更多的字體面貌。
| 軟體 | 最低支援版本 |
| Adobe Illustrator | CC 2018 (2017年10月) |
| Adobe Photoshop | CC 2018 (2017年10月) |
| Adobe InDesign | CC 2020(2019年11月) |
| 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
