Convert “True Type font” into “Webfont”เปลี่ยนฟอนต์ที่มีให้เป็นเว็บฟอนต์

บางครั้งเมื่อเราพัฒนาเว็บเพจโดยเฉพาะเป็นภาษาไทย เราอาจต้องการนำฟอนต์ที่เราดาวน์โหลดนำมาใช้ในเว็บเพจที่เราพัฒนา

ยกตัวอย่างว่าเราใช้โปรแกรม Adobe Muse พัฒนาเว็บและเลือกใช้ฟอนต์ภาษาไทย ฟอนต์จะสามารถแสดงผลได้แต่จะถูกเปลี่ยนให้เป็นรูปภาพ (Raster image)

03-01-2017-11-59-51

และเมื่อเราทำให้เป็น Responsive เว็บเพจ ฟอนต์ดังกล่าวจะแสดงผลไม่ชัดเจนเมื่อเราย่อขยายเว็บเพจ

03-01-2017-12-03-32

03-01-2017-12-15-38

เราแก้ปัญหานี้โดย เปลี่ยน ฟอนต์ttf ที่มีอยู่ในเครื่องคอมพิวเตอร์เรา หรือที่เราดาวน์โหลดเก็บไว้ มาแปลงให้เป็น WOFF (Web Open Font Format) ซึ่งมีขนาดเล็กและเป็นที่ยอมรับจากบราวเซอร์สมัยใหม่

การแปลงฟอนต์ทำได้โดยใช้บริการจากเว็บแปลงฟอนต์เช่น

https://www.web-font-generator.com/

03-01-2017 15-08-37.jpg

https://transfonter.org/

03-01-2017 15-08-19.jpg

เมื่อเราอัพโหลดฟอนต์ภาษาไทยที่เรามีในเครื่องคอมพิวเตอร์ของเราที่เว็บให้บริการแปลงฟอนต์ เราสามารถจะดาวน์โหลดฟอนต์นั้นลงมาเป็นไฟล์.Zip หลังจากนั้นให้ทำการ UnZip ไฟล์ซึ่งจะมีไฟล์ฟอนต์ที่เราเลือกไว้ตอนที่เรากำหนดให้แปลงเป็นนามสกุลอะไรบ้าง เช่น WOFF หรือEOT

กลับมาที่โปรแกรม Adobe Muse และให้ทำการเลือกติดตั้ง Web Fonts ดังภาพด้านล่าง

03-01-2017-12-34-47

หรือไปที่เมนู File> Add/Remove Web Fonts

03-01-2017-12-36-02

เลือกไปที่แท็ป Self-Hosted และ กดปุ่ม +Add Fonts เพื่อทำการติดตั้งฟอนต์ภาษาไทยเข้าไปที่ Adobe Muse

03-01-2017-12-36-40

สามารถกดปุ่ม Browse หรือ ลากฟอนต์ที่ถูกแปงลงแล้วเข้ามาวางในหน้าต่างนี้ก็ได้

03-01-2017-12-36-59

**ต้องแน่ใจว่าฟอนต์ที่เรานำมาใช้นั้นถูกลิขสิทธ์ หรือนำมาใช้ส่วนตัวไม่ได้นำไปใช้ออกแบบเพื่อค้าขาย หรือผลประโยชน์ทางธุรกิจใดๆ** จากตัวอย่างดาวน์โหลดฟอนต์จาก http://www.f0nt.com/release/thai-sans-lite/

03-01-2017-12-38-03

เมื่อเราเพิ่มฟอนต์ภาษาไทยเข้าไปแล้ว เราสามารถเลือกใช้ในโปรแกรม Muse ได้แล้ว

03-01-2017-12-38-31

03-01-2017-12-39-12

จากภาพด้านล่างจะเห็นว่าด้านหลังของฟอนต์จะไม่มีไอคอนรูปภาพแล้ว แสดงว่าตอนนี้ข้อความนี้เป็น Webfont แล้ว

03-01-2017-12-40-01

เมื่อเราย่อขยายบราวเซอร์แล้วฟอนต์ที่แสดงผลจะมีรายละเอียดสวยงามปรับเปลี่ยนไปตามขนาดของบราวเซอร์

03-01-2017-12-45-35

เรียบร้อยครับ 😉

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s