ฟอนต์สี มณีSVG

[uvSOV]

เพิ่งมีเหตุอยากจะใช้ color font เลยเข้ามาศึกษาดู พบว่าไปไกลมากแล้ว  ฟอนต์ตัวนี้ทำเป็นฟอนต์ทดลอง สีแบบโปร่งใส และซ้อนทับกัน



ดังนั้น ไม่เหมาะทั้ง display type และ text type  อ้าว!แล้วทำมาทำไม.. ก็ทดลองไง  



color font ตัวนี้ ใช้เทคนิค OpenType SVG ดังนั้นจะแสดงผลได้แต่ s/w บางตัว เช่น adobe, firefox ส่วน Microsoft, chrome ไม่ work  ที่เหลือไม่ทราบ ฝากทดสอบและบอกผลด้วยเด้อ!!

กรณีที่ s/w ไม่สามารถแสดงผล color font ได้ จะแสดงเป็น font ปรกติ หน้าตาแบบนี้



ขอบคุณครับ

download https://drive.google.com/file/d/1_Exn_d75e-y8njIWsLGfrSCtQfdSpQUz/view?usp=sharing

[uvSOV]

ฺเล่าเรื่อง OpenType SVG ที่ได้ศึกษามาหน่อย  เผื่อมีคนมาแนะนำเพิ่มเติม

1. เริ่มจากการ download color font ที่มีแจก มาทดลอง  พบว่า  บางตัวแสดงสีได้เฉพาะ firefox แต่ chrome เป็นสีดำ  

2. ส่วนอีกประเภท คือ color font ที่แสดงผลสีได้ทั้ง firefox และ chrome

3. เอา color font ของไทย มาทดสอบดู  พบว่า ฟอนต์รวมมิตรของ พจน เท่านั้นที่แสดงได้ทั้ง  firefox และ chrome  และแน่นอน แสดงสีได้บน MS word ด้วย.. ว๊าววว

3.1 จึงได้รบกวน พจน  ให้ตรวจ color font ต่างๆหน่อยว่ามันต่างกันยังไง

color font ที่ download มา

color font ของ พจน


3.2 ได้ข้อสรุปจาก พจน ว่า
3.2.1  color font แบบข้อ 1 ใช้เทคนิคที่เรียกว่า OpenType SVG  โดยการแยกสร้าง font และ svg ออกจากกัน
3.2.2  color font แบบข้อ 2 ใช้เทคนิคที่เรียกว่า COLR/CPAL  (ซึ่งใช้ใน color emoji font นั่นแหละ)
3.2.3  ส่วนของ พจน  มีทั้ง 2 เทคนิคเลยจ้า

4.1 ก็ search ไปเจอ tools ที่สร้าง OpenType SVG font ได้  เลยเอามาทดลองทำ color font  โดยปรับฟอนต์เดิมที่มี ซึ่งบังเอิญใช้ inkscape ซึ่ง support SVG อยู่แล้ว พบว่า
4.1 เอารูป SVG มาใช้ได้เลย  โดย color font จะจัดการเรื่อง font ตามที่กำหนดไว้ใน font ปรกติ  และแสดงผลโดยใช้ภาพจาก SVG
4.2 สามารถใส่ effect ของ SVG ได้เลย แต่การแสดงผล ขึ้นกับ tools แต่ละตัวเลย  อาจจะไม่เหมือนต้นฉบับที่สร้างด้วยซ้ำ
4.3 สามารถแสดงผลแบบ bitmap คือเอารูป PNG มา save เป็น SVG แล้วใช้ได้ด้วย  ดังนั้นก็แสดงเป็นรูปเนียนๆได้เลย
4.4 SVG font จะมีขนาดใหญ่บึ้ม ตาม effect ที่เราใส่ลงไป ส่งผลให้เครื่องอืดทีเดียว ไม่ใช้ slim อย่าง concept ฟอนต์แบบสมัยก่อน  ยิ่งเอารูปมาแสดงผลเนียนๆแล้วไม่ต้องพูดถึง hang ได้เลย แต่ผลงานที่ไป search ดูๆมาก็ เนียนสวยมาก ราคาสูงดีด้วย

inkscape ก่อนสร้างฟอนต์ SVG


แสดงผลใน firefox


ใน AI by พจน


ใน FontCreator by พจน


ใน MS word by พจน



เพิ่มเติม SVG สามารถ animate ได้ด้วย ดังนั้น color font ประเภทนี้ ก็สามารถเคลื่อนไหวได้ด้วยนะ (ไปกันใหญ่แล้ววววว)

จบครับ

หมายเหตุ แต่เนื่องการใส่ effect มันทำให้ ฟอนต์ ขนาดโตมากไป SOVc_maneeSVG ก็เลยทำแค่เป็นฟอนต์สี 3D โปร่งแสง เท่านั้น

credit :  พจน ก็คือ พอ จะ นะ .. ขอบคุณมากครับ ที่สละเวลาวันหยุดมาช่วย ทำอะไรบ้าบอด้วยกัน 

[iannnnn]

สวยมากเลยยยย
แบบนี้เหมือนเอา SVG มาวางเรียงกันเลยใช่ไหมครับ

[Jipatype]

มีไอเดียว่าอยากทำ Animation Font
.svg มันทำ animation ได้ คิดว่ามันสามารถทำ animation ฟอนต์ได้ตามวิธีนี้
https://glyphsapp.com/learn/creating-an-svg-color-font
แต่ลองดูแล้วก็ยังไม่เวิร์คเท่าไหร่
ผับไว้ก่อน

[uvSOV]

มีไอเดียว่าอยากทำ Animation Font
.svg มันทำ animation ได้ คิดว่ามันสามารถทำ animation ฟอนต์ได้ตามวิธีนี้
https://glyphsapp.com/learn/creating-an-svg-color-font
แต่ลองดูแล้วก็ยังไม่เวิร์คเท่าไหร่
ผับไว้ก่อน

เยี่ยมเลย  ขอบคุณครับ เดี๋ยวลองอ่านดู

นอกจากนี้มี color variable font ด้วยนะครับ https://www.harbortype.com/fonts/rocher-color/
ตอนเห็น นึกถึง Jipatype เลย  แต่ก็ยังตันกับความ variable font อยู่ 55

[uvSOV]

แบบนี้เหมือนเอา SVG มาวางเรียงกันเลยใช่ไหมครับ

ใช่ครับ ฟอนต์ กับ SVG เป็นคนละ layer กัน  เป็นอิสระต่อกันเลยครับ  เพียงแต่ ขนาด SVG ต้องไม่กว้างใหญ่กว่า ขนาดฟอนต์แต่ละตัวที่กำหนดไว้ครับ



รูปนี้อธิบายได้เห็นภาพ ว่า color font 2 แบบนี้ จัดการแตกต่างกันอย่างไร

credit : https://djr.com/notes/octobers-font-of-the-month-megabase-open

[TA Font]

กำลังทำฟ้อนต์สีอยู่พอดีเลยครับ แต่ยังไม่เสร็จ เลยยังไม่ได้ทดสอบ ไว้จะมาศึกษาเพิ่มเติมอีกทีนะครับ กราบบบ (-/\-)