ฟอนต์ฟอรั่ม

(https://cdn-images-1.medium.com/max/800/1*jNGTUj2PX2PXHv6sYUrXCg.png)

สนุกล่ะทีนี้ feature ใหม่ ของ Open Type Font ครับ (version 1.8)  เพิ่งอ่านเจอเมื่อวันก่อน

สามารถกำหนดความกว้าง และน้ำหนักได้
(http://img3.f0nt.com/11/03406285ea767ea51c2a5b360583a955.gif)

แล้วยังสามารถปรับเปลี่ยนรูปร่างได้อีกด้วย
(http://www.monotype.com/media/2480/buffalogal.gif)

วันนี้หา web site ที่ show ความสามารถของ variable font เจอแล้ว สนุกมาก

เพื่อนๆลองไปเล่นดูครับ  งานเข้าคนออกแบบฟอนต์ ล่ะทีนี้   :43:

http://www.axis-praxis.org/ (http://www.axis-praxis.org/)

ตัวอย่างใน youtube

คุณพระช่วย :07: :07: :07: :07: :07: :07:

เพิ่มตัวอย่าง การออกแบบ variable font ใน font file เดียว

1. ปรับตัวหนาบาง ความสูงเดียว
(https://typekit.files.wordpress.com/2016/09/peace-type.gif)

2. ปรับตัวหน้าบาง และขนาดความสูงของอักษรตัวพิมพ์เล็ก ในแต่ละระดับ
(http://network.napco.com/target-marketing/wp-content/uploads/sites/3/2017/02/Dunbar_variable_fonts_animation_for_typographica.gif)

3. ปรับความหนาบาง และความสูงแบบไปพร้อมกัน
(http://cjtype.com/dunbar/variablefonts/images/dunbar_variable_fonts.gif)

4. ปรับตัวหนาบาง ความกว้าง และความเอียง
(http://www.monotype.com/media/2568/kairosvariations_3.gif)

5. แปลงร่าง
(https://www.typenetwork.com/assets_content/newsletters/decovar1.gif)

6. ลองเอา ฟอนต์แปลงร่าง มาขยับไม่พร้อมกัน
(https://robinrendle.com/uploads/variable-font.gif)

ศึกษาเพิ่มจากตัวอย่างใน github

https://github.com/adobe-fonts/adobe-variable-font-prototype (https://github.com/adobe-fonts/adobe-variable-font-prototype)
https://github.com/TrueTyper/BuffaloGals (https://github.com/TrueTyper/BuffaloGals)
https://github.com/TypeNetwork/fb-Amstelvar (https://github.com/TypeNetwork/fb-Amstelvar)
https://github.com/twardoch/varfonts-ofl/tree/master/VotoSerifGX-OFL (https://github.com/twardoch/varfonts-ofl/tree/master/VotoSerifGX-OFL)

แค่นึกว่าทั้งหมดนี่ทำจากฟอนต์เพียวๆ ก็หนาวดึ๋งแล้วครับ :59:

เพิ่มเติม เผื่อมีคนสนใจว่า Variable Font แบบไทยๆ นะครับ ผมเขียนไว้เมื่อปลายปีที่แล้ว

- https://fontuni.com/articles/2016-12-19-thai-variable-fonts-idea.html
- https://www.facebook.com/FontUni/videos/vb.675293215917931/1167024560078125

อ้างคำพูดจาก: Sungsit เมื่อ 06 มิ.ย. 2017, 23:59 น.
เพิ่มเติม เผื่อมีคนสนใจว่า Variable Font แบบไทยๆ นะครับ ผมเขียนไว้เมื่อปลายปีที่แล้ว

- https://fontuni.com/articles/2016-12-19-thai-variable-fonts-idea.html
- https://www.facebook.com/FontUni/videos/vb.675293215917931/1167024560078125

ยอดเยี่ยม กระเทียมเจียวเลยครับ  :45: :45: :45:

What do Variable Fonts mean for Web Developers? – prototypr
https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497



สำหรับนักพัฒนาเว็บครับ

ตอนนี้สามารถใช้กับโปรแกรมอะไรบ้างครับ :25:

ที่ลองในเบราว์เซอร์มาตรฐานยังไม่ได้เลยครับ :3005:

อ้างคำพูดจาก: Layiji เมื่อ 22 ก.ค. 2017, 11:15 น.
ตอนนี้สามารถใช้กับโปรแกรมอะไรบ้างครับ :25:

ลองไปที่นี่ครับ http://www.axis-praxis.org/ (http://www.axis-praxis.org/)

เขาจะแนะนำให้ว่า  How to get variable fonts working in Safari, Chrome and Firefox (http://www.axis-praxis.org/blog/2017-04-05/17/how-to-get-variable-fonts-working-in-safari-chrome-and-firefox-macos)

เครื่องผมเป็น windows7  ผมใช้ Chrome สีทองครับ  work และสนุกดี

ฟอนต์เกลียดเต้าหู้ออก Variable Font แล้ว แทบทุกภาษา

ของไทย NotoSansThai-VF.ttf, NotoSansThaiUI-VF.ttf, NotoSerifThai-VF.ttf

download ได้ที่ https://github.com/googlei18n/noto-fonts-alpha/tree/master/from-pipeline/unhinted/variable-ttf (https://github.com/googlei18n/noto-fonts-alpha/tree/master/from-pipeline/unhinted/variable-ttf) จ้า

สนุกสนานแค่ไหน ลองดูที่ fb คุณ Sungsit https://www.facebook.com/FontUni/videos/1408324225948156/ (https://www.facebook.com/FontUni/videos/1408324225948156/)

โอ๊ย สุดยอด :07:

น่าสนใจมากครับ

อัปเดตล่าสุด Google Chrome 62 รองรับฟอนต์แบบนี้แล้วครับ :07c:
ใครอัปเดตโครมแล้วลองเข้าไปเล่นดู http://www.axis-praxis.org/

แปะไว้หน่อย Multiple Masters Font in FonLab

อ้างคำพูดจาก: iannnnn เมื่อ 19 ต.ค. 2017, 18:14 น.

<iframe width="560" height="315" src="https://www.youtube.com/embed/7ht5nYk2iFE" frameborder="0" allowfullscreen></iframe>


แปะไว้หน่อย Multiple Masters Font in FonLab

ลองทำตามไปสองสาม glyph
อย่างเพลินฮะ

น้อง jipatype แนะนำ website มาให้  น่าสนใจมาก จนถึงระดับน่ากลัว เพราะใช้วิเคาะห์ จนถึงล้วงความลับ การออกแบบฟอนต์ variable font ได้เลย
จิ้มไปลองเล่นได้ที่ https://www.axis-praxis.org/samsa/ (https://www.axis-praxis.org/samsa/)

ตัวอย่าง B สามารถเห็นการออกแบบตัวแคบ ตัวกว้าง มองเห็นจุดที่ไม่คิดว่าจะมีซ่อนในเส้นตรง  เทคนิคการซ้อนเส้นตรงรอยหยักตัวB การจัดการรูในตัวB องศาความเอียง การรักษาสัดส่วนตัวอักษร ให้เป็น theme เดียวกันระหว่างตัวแคบ ตัวกว้าง
(http://img3.f0nt.com/14/aba9b60b7e760cfb69bd4ea9f926ec82.jpg)

ตัวอย่าง E มี 2 ชิ้น
(http://img3.f0nt.com/14/61be63d600fb06fe8f5d7f0ed709d106.jpg)

สามารถเลือกฟอนต์ตัวอย่างที่เราสนใจ เป็น idea และการใช้เทคนิคจัดการเส้นตรง เส้นโค้ง มุม ในการออกแบบได้  เลยเอามาแบ่งปันให้ดูกันครับ เชื่อว่าคนออกแบบฟอนต์ที่มีหลายน้ำหนักอยู่แล้ว จะเอาไปปรับใช้ หรือสามารถแปลงเป็น variable font ก็น่าจะได้เลยนะครับ  :12:

**มาบอกศาสตร์มืด แปลง WOFF2-Variable font เป็น TTF**

ตอนนี้ยังไม่มีเว็บไหนสามารถแปลง WOFF2-Variable font เป็น TTF ได้โดยตรง
ต่อให้เปลียนนามสกุลจาก .woff2 เป็น .ttf ก็จะเปิดไม่ขึ้นอยู่ดี การแปลงนั้นเราจะแปลงโดยใช้
เครื่องมือ Open Source : FontTools : https://github.com/fonttools/fonttools
การติดตั้งสามารถอ่านได้จาก Doc ได้เลยครับ หรือ copy and paste
>> pip install fonttools[ufo,lxml,woff,unicode]

การแปลงจาก .WOFF2 เป็น .TTF มีอยู่สองขั้นตอนดังนี้

1. แปลง .WOFF2 เป็น .TTX ก่อนโดยพิมพ์คำสั่งง่ายๆ ดังนี่ แล้วเราจะได้ไฟล์ variable-font.ttx ออกมา
>> ttx /path/to/your/variable-font.woff2

2. แปลง .TTX เป็น .TTF โดยพิมพ์คำสั่งง่ายๆ ดังนี่
>> ttx /path/to/your/variable-font.ttx

แล้วเราจะได้ไฟล์ variable-font.ttf ออกมา สามารถเปิดและติดตั้งลงเครื่องได้แล้ว
แล้วเราจะหา Variable font ได้จากไหนละ จุ๊ๆ :43: :43: อะมาต่อ

การแปลงจาก .TTF เป็น .WOFF2 บ้าง
1. แปลง .TTF เป็น .TTX ก่อน
>> ttx /path/to/your/variable-font.ttf

2 แล้วเราจะได้ .TTX ออกมาแล้วให้เราพิมพ์คำสั่งต่อดังนี่
>> ttx --flavor woff2 /path/to/your/variable-font.ttx

เห็นได้ว่าคำสั่งง่ายมากๆ เลยนะครับ

อ้างคำพูดจาก: Jipatype เมื่อ 14 ก.พ. 2020, 17:48 น.
**มาบอกศาสตร์มืด แปลง WOFF2-Variable font เป็น TTF**

:18: :14:  :45: :45: :45:  :12:  :46: