ผมเคยเขียนเกี่ยวกับเรื่องการใช้ฟ้อนท์บนเว็บไซต์ครั้งหนึ่งแล้ว ในเรื่อง Cufon ใช้ฟ้อนท์บนเว็บไซต์ตามใจคุณ เป็นการใช้ jquery เพื่อ generate text font ให้เป็นภาพ .png (ซึ่งสามารถคลิกไปอ่านรายละเอียดได้ที่นี่)
การใช้ cufon ช่วยในการใช้ฟ้อนท์ตามที่เราต้องการ ก็เป็นทางเลือกที่ดีที่หลายๆเลือกใช้อยู่ (select2web ก็ใช้เหมือนกัน) แต่ข้อจำกัดหนึ่งของ cufon คือ เมื่อไรก็ตามที่ข้อความที่เราใช้ cufon สร้างให้เป็นภาพ หากเป็นลิงค์ หรือข้อความที่อยู่ในแท็ก a เวลาเอาเมาสท์ไป hover มันเปลี่ยนสี คือไม่สามารถใช้คำสั่ง hover กับ cufon ได้นั่นเอง !!
วันนี้ไม่ได้มานำเสนอวิธีทำ hover ให้ cufon ครับ แต่มีวิธีใช้ฟ้อนท์บนเว็บไซต์ตามใจคุณ อีกวิธีหนึ่ง นั่นคือ
@font-face
@font-face เป็นการ import ฟ้อนท์ที่เราต้องการมาใช้บนเว็บไซต์ โดยระบุพาธให้ถูกต้อง
@font-face {
font-family: Graublauweb;
src: url(‘Graublauweb.eot’); /* IE9 Compatibility Modes */
src: url(‘Graublauweb.eot?’) format(‘eot’), /* IE6-IE8 */
url(‘Graublauweb.woff’) format(‘woff’), /* Modern Browsers */
url(‘Graublauweb.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘Graublauweb.svg#svgGraublauweb’) format(‘svg’); /* Legacy iOS */
}
#content h2 {
font-family: ‘Graublauweb‘;
font-size:24px;
}
เพื่อให้ @font-face ใช้ได้ทุกบราวเซอร์ ไฟล์ฟ้อนท์ที่ import เข้ามาใช้ก็ต้องตอบสนองได้ทุกบราวเซอร์เช่นกัน จากตัวอย่างข้างต้นจะเห็นว่า ฟ้อนท์ชื่อ Graublauweb มีหลายนามสกุล และแต่ละนามสกุลก็ซัพพอร์ตบราวเซอร์แตกต่างกัน (ตามที่คอมเมนต์ไว้)
และจากตัวอย่าง css ด้านบน ข้อควา่มที่อยู่ในแท็ก h2 จะกลายเป็นฟ้อนท์ตามที่เรา import เข้ามา ก็คือคือ Graublauweb
จริงๆบทความนี้ก็มีเท่านี้แหละครับ เพียงเท่านี้เว็บไซต์ของท่านก็จะมีฟ้อนท์แปลกๆได้ตามใจคุณแล้วละ
แต่ที่อยากจะบอกเล่าต่ออีกนิ๊ดนึง เพื่อความง่าย สะดวก

เราๆมีฟ้อนท์ในเครื่องกันทุกคนอยู่แล้ว แต่ไฟล์ฟ้อนท์ของเรามีแต่นามสกุล .ttf แล้วถ้าอยากได้นามสกุล .eot, woff หรือ svg บ้างละ? จะทำอย่างไร? จะไปหาที่ไหน อะไรยังไง? ฯลฯ
มาดูวิธีทำกันเลยครับ
1. หาฟ้อนท์ที่ชอบๆ มา 1 ตัว (มากกว่านั้นได้) นามสกุล .ttf
2. คลิกไปที่เว็บไซต์ http://www.font2web.com/ (เว็บนี้ไม่ได้เป็นอะไรก็ select2web.com นะครับ แม้ชื่อจะละม้ายกันก็ตาม)
3. ในหน้าเว็บจะมีฟอร์มสำหรับupload file ให้ท่าน browse แล้วเลือกฟ้อนท์ที่เตรียมไว้ในข้อ 1 เสร็จแล้วคลิกปุ่ม Convert & Download
ท่านจะได้ไฟล์ .zip มาตัวหนึ่ง ในนั้นมีสิ่งที่ท่านต้องการครบถ้วน ตั้งแต่ไฟล์ fonts.css, demo.html และไฟล์ฟ้อนท์นามสกุลๆต่างครบถ้วนกระบวนความ
ทีนี้เราก็สามารถเอาฟ้อนท์ไปใช้บนเว็บได้ตามใจแล้วละ อีกทั้งซัพพอร์ตทุกบราวเซอร์ และที่สำคัญ สามารถ hover ได้อย่างไร้ปัญหา!!






Aptana จะลบทั้งบรรทัดมันต้องกดสองปุ่ม
ผมหันมาใช้ Aptana เขียนโปรแกรมได้พักนึงแล้ว เมื่อก่อนใช้ Netbean แต่ Netbean ตอนแก้จาวาสคริปต์แล้วมันอืดๆ ก็เลยเปลี่ยน
สิ่งที่ Netbean ทำให้เสียนิสัยก็คือ มันมีช้อตคัตให้ลบโค้ดได้ทีละบรรทัด ใช้จนติด
พอมาใช้ Aptana มองในเมนูแล้วมันไม่มีสิ่งที่เราติด แอบหยุดหงิดอยู่ไม่น้อย
เมื่อวานนั่งคิดๆอยู่ว่า Aptana มันน่าจะมีช้อตคัตอย่างว่านา ก็เลยลองหาในเน็ตดู
และแล้วมันก็มีจริงๆด้วย ทะลึ่งหลบอยู่
ไปที่ Windows > Preferences
ไปต่อที่ General > Keys พิมพ์คำว่า delete เข้าไปในช่องค้นหาก็จะเจอ
มันใช้สองปุ่ม Ctrl+D นี่เอง ยังมีคีย์ลัดให้ใช้งานอีกหลายตัวที่น่าสนใจจดจำ ลองเลือกๆดู
สำหรับผมแล้วผมชอบคีย์ลัดที่โคลนนิ่งโค้ดทั้งบรรทัดด้วย ลดเวลาการก้อปปี้แล้ววาง ได้อักโข