ขุดหลุมฝังฟอนต์

[มังกร]

ปัญหาการฝังฟอนต์ในโปรแกรมต่างๆเป็นคำถามที่คนมักจะไม่ค่อยถามกัน
เพราะหลายคนนึกว่าทางออกของมันจะมีแค่การเอาฟอนต์ของเครื่องเรา ติดไปลงกับเครื่องอื่นเท่านั้น
แต่หารู้ไม่ว่าในออพชั่นของโปรแกรมต่างๆ มันได้มีตัวเลือกการบันทึกแบบฝังฟอนต์ [embed] ลงไปด้วย
เพื่อผู้อื่นที่ไม่มีฟอนต์แบบเครื่องเรา สามารถมองเห็นฟอนต์อย่างที่เราเห็นได้

ต่อไปนี้ก็จะเป็นวิธีการฝังฟอนต์สำหรับโปรแกรมต่างๆนะครับ (คลิกที่ชื่อโปรแกรมที่จะอ่านได้เลย)
1.Microsoft Word
2.Microsoft PowerPoint
3.Macromedia Flash
4.การฝังฟอนต์ไปยังเว็บไซต์ โดยใช้นามสกุล eot

ส่วนจะมีโปรแกรมอะไรเพิ่มเติมอีกนั้นก็รอดูแล้วกันครับ

[มังกร]

ก่อนอื่นก็ขอบอกก่อนนะครับ
ว่าถึงแม้จะทำให้มีแบบอักษรติดอยู่กับไฟล์งาน
แต่ถึงกระนั้นก็ต้องแลกมากับขนาดที่ใหญ่โตกว่าเดิมด้วย
เอาล่ะ มาดูวิธีกันเลยครับ (เหมือนจะเยอะ แต่สรุปเนื้อหาได้แค่ขี้มด)


จากภาพคือเรามีข้อความพร้อมด้วยฟอนต์อันสวยงามเรียบร้อยแล้ว
เสร็จแล้วก็ไปที่เมนู "แฟ้ม" แล้วก็บันทึกเสีย

แต่เดี๊ยวก่อนนนนนน

ถ้าทำอย่างนี้ ฟอนต์ที่มีอยู่ในไฟล์งานของคุณก็จะไม่ติดมาด้วยนะครับ
ดังนั้น เรามาดูวิธีทำให้มันแนบติดไปกับเอกสารดีกว่า (ภาษาประกิตเขาเรียกว่า embed)

ดังนั้นเมนูตอนบันทึก ให้ท่านเลือกตรง "เครื่องมือ" แล้วเลือก "ตัวเลือกการบันทึก"



จากนั้นก็จะมีเจ้าหน้าต่างนี้ขึ้นมา ไหว้มันทีนึง



อะฮ้าาา แล้วดูตรงกรอบฟ้าๆ อืมมม ไม่ใช่สิ มันออกน้ำเงินนะ เอ๊อะ มันก็ไม่ใช่น้ำเงินอีกแหละ
มันอยู่ในโทนเฉดบลูเอมวี่ มันน่าจะเป็นสีน้ำเงินทะเลออกสีครามเหมือนท้องฟ้ายามโพล้เพล้

ส้นตีนเถอะ

ตรงนั้นล่ะครับที่เราจะมาสนใจ ถ้าเราต้องการฝังเนื้ออักษรทั้งหมดก็ติ๊กเลยครับ
(ตูไม่เล่นหรอก มุกติ๊ก กลิ่นสี - ติ๊ก เจษฎาภรณ์ มันเฝือแล้ว)

พอเราติ๊กที่ "ฝังแบบอักษร TrueType" เสร็จ คราวนี้มันก็ปรากฏตัวเลือกโผล่มาให้เราติ๊ก กลิ่นสี อีก (อ้าว)

• ฝังอักขระเฉพาะที่ใช้ลงในเอกสาร หมายถึง ถ้าเอกสารเรามี
  ข้อความแค่ 4 ตัว มันก็จะเก็บฟอนต์แค่ 4 อักขระเท่านั้น
• ไม่ฝังแบบอักษรระบบทั่วไป ตูก็ไม่รู้ว่าหมายความว่าไง ใครรู้ช่วยบอกตูที (อย่างนั้นไม่ต้องติ๊กหรอก)

ดังนั้นถ้าอยากให้ขนาดเอกสาร word เบาๆ ก็ติ๊กที่“ฝังอักขระเฉพาะที่ใช้ลงในเอกสาร”
แต่ถ้าอยากให้ติดไปด้วย เผื่อแก้ไขข้อความเพิ่มเติมที่หลังก็ไม่ต้องติ๊กเพิ่มตรงกรอบสีแดง

กดตกลง จากนั้นก็บันทึกตามปกติ ก็เป็นอันผิดพิธี

คราวนี้เรามาดูขนาดที่แตกต่างระหว่างการฝังทุกตัวกับฝังเฉพาะกันครับ



พระเจ้าช่วยกล้วยทอด!! ขนาดต่างกันถึง 40KB โอ๊กกกกก พานท้องแท้
อย่าดูถูกเชียวนะ ลองนึกให้ดีว่า ถ้าทั้งเอกสารของคุณใช้อักษรละ 1 ฟอนต์
แล้วรวมทั้งสิ้น 1000 อักษร คิดดูแล้วกัน ถ้าคุณเลือกแบบฝังหมดทุกอักขร ขนาดจะมโหฬารแค่ไหน

จบ...

ฮะ ยังไม่จบอีกหรอ

แถม ถ้าจะให้มันเป็นค่าพื้นฐานตลอด เมื่อไรที่เรา save งาน เผื่อที่หลังลืมแนบไปด้วยก็ให้ทำตามนี้ครับ

1.ไปที่เมนู เครื่องมือ ---> ตัวเลือก



2.ที่แท็บบันทึก น่านนนนล่ะ แล้วก็จูนเหมือนกับข้างบนเลย


พอกด "ตกลง" ก็เป็นอันว่าคราวหลัง เวลาบันทึกงาน มันก็จะบันทึกฟอนต์ไปด้วยอัตโนมัติครับ

จบ จบ จบ จบ สำหรับ Microsoft Word

[มังกร]

สำหรับขั้นตอนต่างๆ ก็จะเหมือนกับ Microsoft Word เด๊ะๆครับ
ดังนั้นผมจะพูดผ่านๆนะครับ (นั่นไง เริ่มขี้เกียจ  )

หลังจากที่ท่านเปิดไฟล์งานเสร็จเรียบร้อย
ก็บันทึกตามปกติครับ



เลือกตรง "เครื่องมือ" --> ตัวเลือกการบันทึก...





คล้ายๆกับ Microsoft Word นั่นแหละครับ
อันนี้ก็แล้วแต่วิจารณญาณของท่าน ถ้าจะเอาไว้ให้เพื่อนที่ไม่มีฟอนต์แก้ไขต่อก็เลือกอันล่าง
ถ้าจะไว้แค่พรีเซนต์งานเฉยๆ ไม่ได้ให้ใคร ก็เลือกอันบนครับ

และที่สำคัญ การฝังอักขระทั้งหมด จะทำให้ขนาดเอกสารโตก่อนวัยอันควร (ถ้าใช้ฟอนต์หลายตัว)
และสไลด์งานที่นำเสนอจะเกิดอาการชักกระตุกเนื่องจากพิษการซดแรมได้นะครับ

หลังจากนี้ ก็บันทึกเสียให้เรียบร้อย เป็นอันว่าฟอนต์ก็จะติดไปเอกสารแล้วครับ

ส่วนวิธีการที่ให้ทีหลังไม่ต้องมานั่งบันทึกให้ยุ่งยากแบบนี้ ก็ให้ท่านไปที่ เครื่องมือ --> ตัวเลือก
แล้วหย่อนเมาส์ไปที่แท็บ "บันทึก" ค่าต่างๆก็เหมือนกับรูปข้างบนน่ัะครับ

[มังกร]

flash นี่ก็เป็นโปรแกรมอีกโปรแกรมหนึ่งที่มีการ embed ฟอนต์ไม่ยากครับ
ซึ่งต่อจากนี้จะขอกล่าวแค่ช่วงที่มันอธิบายถึงวิธีการ embed พอ
ส่วนอื่นๆไปหาอ่านได้เอาตามเว็บไซต์ที่มีสอนต่างๆ หรือหนังสือพวกแฟลชนะครับ

เอาล่ะ ก่อนอื่นท่านต้องทำการสร้างกล่องข้อความก่อน โดยคลิกที่เมนูรูปตัว A ด้านซ้ายมือครับ
จากนั้นก็ลากกรอบ ให้มีขนาดเหมาะพอประมาณ แล้วก็พิมพ์ข้อความที่ต้องการลงไปได้เลยครับ



โดยปกติแล้ว textbox ในแฟลชจะมี 3 รูปแบบครับ



1.Static text คือรูปแบบที่เหมือนกับรูปภาพอักษร คือไม่สามารถป้ายแถบดำ [select] ได้ เอาไว้อ่านได้อย่างเดียว
โดยปกติ กล่องข้อความแบบนี้ จะติดเนื้อฟอนต์ไปโดยอัตโนมัติ ดังนั้นเราไม่ต้องฝังฟอนต์อย่าง 2 รูปแบบด้านล่าง

2.Dynamic text คืออักษรที่สามารถป้ายแถบดำได้ แต่ไม่สามารถแก้ไขข้อความได้ [เหมือนข้อความในเว็บไซต์]
(มักใช้กับคำสั่ง actionscript ที่ต้องใช้ข้อความเข้าไปประกอบด้วย)

3.Input text คืออักษรที่เราสามารถแก้ไขได้ พิมพ์ได้ ตัวอย่างเช่นแฟลชทดสอบฟอนต์ ในหน้า F0NT.L0AD เป็นต้น

ถ้าเราเลือกกล่องข้อความแบบ Static text ใน Macromedia Flash เราก็ไม่ต้องทำการ embed นะครับ
เพราะมันจะติดให้เราโดยอัตโนมัติ แต่ว่าถ้าแบบ Dynamic Text กับ Input Text เราก็จะต้องทำการ embed ไปด้วย
ไม่งั้นผู้อื่นจะไม่เห็นฟอนต์แบบเรา

ขั้นตอนการ embed

1.เลือกกล่องข้อความนั้น แ้ล้วคลิกที่เมนู embed



2.คราวนี้มันจะโผล่หน้าต่างการ embed อักขระ เราก็เลือกอักขระที่ต้องการเลยครับ



กด OK แล้ว Export เป็นไฟล์ SWF ตามต้องกา่ร แค่นี้ฟอนต์ของเราก็จะติดไปด้วยแล้ว

[มังกร]

เห็นเดี๋ยวนี้หลายเว็บชอบใช้ฟอนต์แปลกๆในการทำเว็บไซต์นะครับ
แต่สิ่งที่แย่ ก็คือถ้าคนที่มาชมเว็บนั้นไม่มีฟอนต์ล่ะ เว็บนั้นๆก็จะดูไม่จืด
ส่วนเจ้าของเว็บก็ขู่ให้ผู้ชมเว็บ โหลดเจ้าฟอนต์ตัวนั้นตัวนี้ไปติดตั้ง (ตกลงว่าทำเว็บเพื่อใครวะ?)

ดังนั้นทางแก้ที่ดีที่สุด และง่ายที่สุด นั่นก็คือใช้ฟอนต์ที่มันมีอยู่นี่แหละครับ ไม่ต้องไปดิ้นรนที่ไหน
อย่าง tahoma หรือ ms sans serif

แต่เอาเถอะ... ถ้าอยากให้ฟอนต์มันติดไปกับเว็บ มันก็พอจะมีหนทางอยู่บ้างนะครับ
ด้วยการ embed ฟอนต์ติดไปกับเว็บ ซึ่งนี่ก็ไม่ใช่วิธีที่ดีอีกแหละ
เพราะเทคโนโลยีนี้ มันสนับสนุนแต่เบราเซอร์ internet explorer เวอร์ชั่น 4 ขึ้นไปเท่านั้น
ส่วน mozilla firefox และ opera ไม่รองรับ ดังนั้นใครใช้เบราเซอร์นี้ ก็จะมองไม่เห็นฟอนต์อยู่ดี
(ไม่ใช่อะไรหรอก คือการ embed มันใช่มาตรฐานของการทำเว็บ ภายใต้ W3C
ซึ่งมีแต่ ie เท่านั้นที่ชอบแหกกฎ)

การ embed ที่นิยม (ความจริงก็ไม่ได้นิยมหรอก) คือรูปแบบ Embedded OpenType โดยจะมีนามสกุล *.eot
ซึ่งโปรแกรมที่ไว้ใช้จัดการก็คือ WEFT ของค่าย Microsoft

ต่อไปนี้ก็คือขั้นตอนการทำนะครับ

1.การติดตั้ง

ไปดาวน์โหลด Microsoft WEFT ได้ที่นี่ครับ (ปัจจุบันคือเวอร์ชั่น 5.3.2)
http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm




เมื่อโหลดเสร็จ จากนั้นก็ทำการ install ตามนี้ได้เลย



กด Yes แล้วมันก็จะขึ้นกรอบขึ้นมาบอกว่า



ก็ปิดโปรแกรมที่รันอยู่ให้หมดก่อนครัุบ กด OK เพื่อทำต่อไป



ไม่ต้องอ่านหรอก กด Accept ไปเลย



ไม่ต้องตกใจครับ ว่าให้ลงรหัสอะไร
ไม่ต้องทำอะไร Next โลดดดดดดด



เลือกที่อยู่ที่จะเก็บโปรแกรม
เสร็จแล้วกด Next (เรื่องมากฉิบ..)


กดเย็สไปเลย เพื่อให้มันสร้างโฟลเดอร์ที่เก็บโปรแกรม



ไหนๆก็อุตส่าห์โหลดแล้ว ติ๊กๆไปให้หมดแหละ





กด Finish แล้วก็รอชั่วอึดใจ

อ๋าห์~ เสร็จแล้ว (แค่ขั้นตอนลงก็ 10 ภาพไปแล้ว - -)



ตอนนี้ก็เปิดโปรแกรมได้เลยครับ
พอเปิดครั้งแรก มันบอกว่าจะให้อัพเดตฐานข้อมูลฟอนต์มั้ย ก็กด Yes ไปเถอะครับ
จากนั้นก็รอ... เป็นอันว่าเสร็จในเรื่องการติดตั้งครับ



2.ขั้นตอนในการสร้างเว็บ

คราวนี้เราก็สร้างไฟล์ html เพื่อทดสอบซิ แล้วดูว่าจะเป็นไง
เปิดโปรแกรมสร้างเว็บของคุณได้เลยครับ (ของผมขอใช้ Notepad2)



ใส่ CODE ดังนี้

โค้ด:

<FONT FACE="JS Kobori Allcaps">สวัสดีชาวโลก ABC</FONT>

(หมายถึงให้กำหนดคำว่า "สวัสดีชาวโลก ABC" เป็นฟอนต์ JS Kobori Allcabs)
พอใส่ code เสร็จแล้วก็บันทึกซะครับ (ตรงนี้เปลี่ยนให้เป็นฟอนต์ที่คุณชอบเอาเอง
โดยจะต้องตรงกับชื่อของฟอนต์ตัวนั้นๆจริงๆ)

หรือท่านอาจจะใช้ CSS เข้าช่วย ก็ทำได้ตามสะดวก
โดยที่ไฟล์ CSS ใส่ Code ดังนี้

โค้ด:

.xxx { font-family: "JS Kobori Allcaps"; }

แนวทางของ css มีแค่นี้
ขอพูดแค่นี้พอ เพราะจุดประสงค์คือการ embed ฟอนต์นะครับ ไม่งั้นบทความนี้คงไม่จบซักที


3.ได้เวลาฝังฟอนต์แล้ว

เข้า Micosoft WEFT อีกครั้งครับ
แล้วไปที่เมนู Wizard ตามภาพ



กด Next ครับ



กรอกชื่อกับอีเมล์ แล้วกด Next (ไอ้ digital ID นี่ไม่ต้องไปกรอกหรอก)



กดเจ้าปุ่ม ... เสร็จแล้วก็เลือกเจ้าไฟล์ html ที่เราสร้าง จากนั้นกด OK



Next > (ตูโพสภาพละเอียดไปป้าววะ)



กด Next จากนั้นจะขึ้นกรอบบ้าอะไรขึ้นมาก็ไม่รู้ Yesๆๆๆ ไปเถอะ



คราวนี้มันก็จะให้เลือกสับเซตครับ
สับเซตก็หมายถึงการที่มีข้อความอยู่ในหน้าเว็บนั้นกี่ตัว
แล้วการฝังฟอนต์ก็จะเป็นไปตามจำนวนข้อความนั้น โดยมีให้เลือก 7 แบบ
อ่านตามต้นฉบับตาน้ำข้าวแล้วกัน

Per-page subsetting — WEFT worries only about this one page and no other. It counts the characters on this page and creates a unique font file for it. Other pages need their own unique font files.

Per-site subsetting — WEFT looks at all the pages you're creating and generates one font file that contains all the characters needed site-wide, which is used with all your pages. Each font family is treated individually.

Family-based subsetting (default) — The same as per-site subsetting, except WEFT treats font families together instead of just looking at individual fonts.

Union subsetting — Each embedded font contains all the characters on the page that are used in any embedded font.

Raw subsetting — The same as union subsetting, except invisible characters are embedded as well (e.g., those in scripts and comments).

Language subsetting — WEFT will embed based on language usage rather than character usage. If you select this option, the Language pulldown menu will be available.

No subsetting — The entire font will be embedded, not just the characters you need. This means big files!

ก็เลือกเอาตามชอบครับว่าจะเอาแบบไหน ซึ่งค่าพื้นฐานของมันก็คือ Family-based subsetting
ก็คือเก็บฐานข้อมูลที่เป็นแบบตระกูลฟอนต์นั้นๆ อีกแบบที่น่าสนใจคือ No subsetting นั่นก็คือรายการของฟอนต์ทุกตัวจะถูกเก็บไว้
คุณจะสามารถไปแก้ไขทีหลังได้ แต่แน่นอน ขนาดมันก็จะมโหฬาร

แต่ผมขอแนะนำให้เลือกแบบ No subsetting นะครับ
เพราะถึงขนาดไฟล์จะใหญ่ เรื่องวรรณยุกต์มันก็จะไม่มีปัญหานะครับ
ในทางกลับกันถ้าเราเลือกแบบ Family-based subsetting วรรณยุกต์บางตัวจะหายไป
อย่างเช่นฟอนต์ที่ใช้ template ของนายพลรุ่นใหม่เป็นต้น

เอาล่ะนอกจากนี้ยังเพิ่มฟอนต์เองก็ได้ จะเพิ่มยังไง คราวนี้ก็ต้องไปลองศึกษาดูเองแล้วนะครับ


4.เลือกที่เก็ฺบไฟล์ฟอนต์ของคุณ

จากนี้ก็จะเป็นขั้นตอนที่คุณจะเลือกตำแหน่งที่ใช้เก็บไฟล์ *.eot หรือไฟล์ที่ได้หลังจากการฝังนั่นเอง



ให้เลือก URL ของไฟล์ที่จะเก็บ .eot ครับ ซึ่งแนะนำว่าให้เก็บไว้ในตำแหน่งเดียวกับไฟล์ html เลย จะได้สะดวก
พอกด Next ก็จะปรากฏกรอบขึ้นมา เพื่อที่ให้เราใส่ URL ของเว็บไซต์ของเราบนโลกอินเทอร์เน็ต ที่เราจะเก็บ html
ซึ่งเว็บตัวอย่างของผมคือเว็บตามนี้ครับ





หลังจากรอสักครู่ ก็จะปรากฏหน้าต่างแบบนี้ นั่นคือหน้าที่เอาไว้บันทึกโปรเจกต์ของเรา เผื่อไว้แก้ไขทีหลัง
อันนี้ก็กำหนดเอาเองตามสะดวกเลยครับ



จากนี้ไปก็เป็นหน้าที่ของคุณที่จะต้องอัพโหลดขึ้นไปบนเว็บไซต์ ซึ่งตำแหน่งของไฟล์เว็บกับ .eot
ต้องเป็นตำแหน่งเดียวกันกับตอนสร้างมันนะครับ

แล้วถ้าเราเปิดไฟล์ test.html ไปดู ก็จะเห็นว่ามี css เพิ่มขึ้นมาด้วย ตัวอย่างเช่น

โค้ด:

<!-- /* $WEFT -- Created by: XXXXXXX */
  @font-face {
    font-family: XXXXXXXXX;
    font-style:  normal;
    font-weight: normal;
    src: url(XXXXX.eot);
  }
-->

หมายความว่าการฝังฟอนต์ของเราเสร็จสมบูรณ์แล้วครับ

จบบริบูรณ์!!

ตัวอย่างของเว็บไซต์เข้าไปดูที่นี่นะครับ
http://www.firefoxthai.com/eot/test.html

อ้ัอ..นอกจากจะมีการกำหนดแบบ file:// ยังมีแบบ http:// ด้วยนะครับ
อันนี้ก็ยังไม่ได้ลองเล่น แต่คิดว่าคงจะทำได้แบบออนไลน์เลย ซึ่งดีมากๆ

สวัสดีครับ

เดี๋ยววววว
อย่าลืมนะว่านี่ไม่สามารถเปิดกับเบราเซอร์อื่นที่ไม่ใช่ core เดียวกับ ie
ดังนั้นคนอื่นที่ใช้เบราเซอร์ตัวอื่นจะมองไม่เห็น
มีเทคโนโลยีตัวนึงครับที่น่าสนใจ ในการ embed ฟอนต์
โดยมันมีชื่อ sIFR โดยยประยุกต์แฟลชเข้าไปกับเว็บไซต์ อ่านรายละเอียดที่นี่
http://www.mikeindustries.com/sifr/

ตอนนี้เว็บภาษาไทยสำหรับวิธีการใช้ sIFR เสร็จแล้วครับ
เข้าไปเยี่ยมชมกันเลยที่ http://zf.f0nt.com/sifr/



//เอื้อเฟื้อข้อมูล สำหรับ WEFT
http://hotwired.lycos.com/webmonkey/design/fonts/tutorials/tutorial2.html
http://www.microsoft.com/typography/WEFT.mspx

[มังกร]

(เพิ่มเติมเผื่อมีโปรแกรมอื่นๆในภายหลัง)

[มังกร]

อุตส่าห์ปั่นกันตั้งนาน โดนลบเหี้ยนเลย

ช่วยลิสต์หน่อยดิ๊ว่าจะเขียนเรื่องของอะไรบ้าง
เผื่อพี่ๆ น้องๆ จะมาช่วยกันยำ

ไอ้ที่ปั่นนี่ไม่มีอะไรเล้ยยยยยย ตูเลยขอลบดีกว่า ขอโทษทุกคนด้วยนะครับ
อ้อ เขียนไว้แล้วนะว่ามีโปรแกรมอะไรบ้างที่โพสแรก

คือพอดีตูทำมันแล้วใน dreamweaver จะเอามาโพส เตรียมไว้ดิบดี
เว็บดันเจือกล่มตอนที่ตูโพสไปอันนึง 

(ขอลบโพสแอนหน่อยนะ คือไม่งั้นสีแบล็กกราวนด์ภาพมันไม่ตรงน่ะ ขอโทษครับ)

เปรี้ยวจริงๆ เตรียมเรื่องสีของฉากหลังด้วย
(ช่วยส่ง จมล แนบภาพขนาด 135x120 ไว้ทำไอคอนหน้าแรก กะ 270x120 ไว้ทำไอคอนหน้าบทความหน่อยดิ๊)

(+30)

[มังกร]

ใช้อีก 


บวกให้ตามที่บวกได้

ฝังฟอนต์ 4 โปรแกรม
+40 

       บวกไม่ได้

เจ๋ง จริง ๆ

[มังกร]

น่าจะสอนไอ้ sIFR ด้วยเนอะ
เพราะคงไม่มีใครคลิ๊กลิงก์หรอก

[มังกร]

ทำอยู๊ 

เช้ดโด้ว มันยอดจริง ๆ เลย