เห็นเดี๋ยวนี้หลายเว็บชอบใช้ฟอนต์แปลกๆในการทำเว็บไซต์นะครับ
แต่สิ่งที่แย่ ก็คือถ้าคนที่มาชมเว็บนั้นไม่มีฟอนต์ล่ะ เว็บนั้นๆก็จะดูไม่จืด
ส่วนเจ้าของเว็บก็ขู่ให้ผู้ชมเว็บ โหลดเจ้าฟอนต์ตัวนั้นตัวนี้ไปติดตั้ง (ตกลงว่าทำเว็บเพื่อใครวะ?)
ดังนั้นทางแก้ที่ดีที่สุด และง่ายที่สุด นั่นก็คือใช้ฟอนต์ที่มันมีอยู่นี่แหละครับ ไม่ต้องไปดิ้นรนที่ไหน
อย่าง 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.htmlhttp://www.microsoft.com/typography/WEFT.mspx
