適合企業的用字方案

2021-12-28 10:14:08.0

分類: 字体产品与应用

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

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

時間在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

如何呈現國字〇

在使用輸入法輸出中文字時,你的零是以怎樣的面貌呈現呢?是寫成國字「零」,還是「〇」、「O」、「○」、「0」或是寫「0」?在windows作業系統的環境裡,「零」、「O」或「0」使用任何輸入法都可以打出來,但是「〇」用一般系統內建的輸入法像是注音、新注音、倉頡是找不到的,如果您有額外安裝的輸入法,如自然輸入法,鍵入零這個字,則可以透過選單找到「〇」。

上面舉例的這些字元造型都長的很相近,每一個字元在Unicode字碼的定義裡都有一組數字來代表自己,這組數字一般通稱為字碼,這幾個字碼及其代表的意思分別如下:

零:U+96F6,中文漢字零。

0:U+FF10,全形數字零。

○:U+25CB,空心圓圈,幾何圖形。

〇:U+3007,國字零,中日韓符號和標點。

0:U+0030,數字零,屬於基本拉丁字母。

O:U+004F,拉丁大寫字母O,屬於基本拉丁字母。

 

這些造型相似的字元在使用上會有怎樣的差異,下圖我們以微軟正黑以及文鼎UD晶熙黑體做舉例,在使用國字顯示西元年時,我們可以看到使用 U+3007「〇」字元有最佳的排版效果,除了U+3007這個字元本身就是為了與國字一起使用外,以晶熙黑體為例,還會因應字體造型、字重做最佳化的設計。

字碼對於大部份人來說很陌生,而且並不是每個軟體都支援字碼輸入,在word使用微軟注音輸入法時,透過輸入鍵盤上左上位置的「`」這個符號,就可以輸入字碼,輸入「~」會產生一個黃色的小視窗,此時輸入「U3007」按空格就可產出「〇」,要特別注意的是數字不能用鍵盤右方的小鍵盤輸入,一定要用英文上方的數字輸入才行。

如果在繪圖軟體,如Adobe illustrator裡,我們可以透過「字符」工具面版來找到「U+3007,〇」這個字元,或者是用前面word輸入的教學方式,在word中將「〇」呼叫出來,再複製到Adobe illustrator中做使用。

 

分享一個可以快速打出「〇」的方法,讓你不用再花時間找方法要怎麼打出這個字。

1. 開啟瀏覽器到google翻譯的頁面:https://translate.google.com/?hl=zh-TW

2. 選擇中文,會看到右下角顯示「注」,點選下拉選單,選擇「簡體中文(中國)-手寫」

3. 選好後就會出現手寫的輸入框,直接用滑鼠在上面寫「〇」

4. 寫好後就會顯示和「〇」相似的字,選擇紅框即會產出「〇」 

這個方法是不是很簡單,快來試試看吧!