คู่มือฉบับย่อสำหรับแบบอักษรบนเว็บผ่านทาง @font-face

Paul Irish

เกริ่นนำ

โปรแกรมดูตัวอย่างแบบอักษร
ดูว่าเว็บฟอนต์นั้นมีความยืดหยุ่นมากน้อยแค่ไหนจากโปรแกรมแสดงตัวอย่างแบบอักษร

คุณลักษณะ @font-face จาก CSS3 ช่วยให้เราใช้แบบอักษรที่กำหนดเองบนเว็บในลักษณะที่เข้าถึงได้ ปรับเปลี่ยนได้ และรองรับการปรับขนาด แต่คุณอาจพูดว่า "ทำไมเราถึงใช้ @font-face หากเรามี Cufon, sIFR และใช้ข้อความในรูปภาพ" ประโยชน์บางประการของการใช้ประโยชน์จาก @font-face สำหรับแบบอักษรที่กำหนดเอง:

  • ความสามารถในการค้นหาแบบเต็มตามการค้นหา (ctrl-F)
  • การช่วยเหลือพิเศษสำหรับเทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ
  • ข้อความแปลได้ผ่านบริการแปลภาษาในเบราว์เซอร์หรือบริการแปลภาษา
  • CSS สามารถปรับแต่งการแสดงผลแบบตัวอักษร: line-height, letter-spacing, text-shadow, text-align และตัวเลือกอย่างเช่น ::first-letter และ ::first-line ได้อย่างเต็มที่

ชื่อแบบอักษร @font-face เป็นหลัก

โดยพื้นฐานแล้ว เราจะประกาศแบบอักษรรีโมตที่กำหนดเองใหม่ดังนี้

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

จากนั้นนำไปใช้

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

ในการประกาศ @font-face นี้ เราใช้พร็อพเพอร์ตี้ font-family เพื่อตั้งชื่อแบบอักษรอย่างชัดแจ้ง เป็นอะไรก็ได้ ไม่ว่าแบบอักษรนั้นจริงๆ จะใช้ชื่ออะไร font-family: 'SuperDuperComicSans'; จะถือว่าดูดีเสมอและอาจไม่กระทบต่อชื่อเสียงของคุณ ในพร็อพเพอร์ตี้ src เราจะชี้ไปยังตําแหน่งที่เบราว์เซอร์สามารถค้นหาชิ้นงานแบบอักษร ประเภทแบบอักษรที่ถูกต้องบางประเภท ได้แก่ eot, ttf, otf, svg หรือ data URI ที่จะฝังข้อมูลแบบอักษรทั้งหมดในบรรทัด ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์

OTF และ TTF svg woff Eot
IE IE9 IE9 IE5 ขึ้นไป
Firefox FF3.5 FF3.5 FF3.6
Chrome Chrome 4 Chrome 0.3 Chrome 5
Safari 3.1 3.1
โอเปร่า โอเปร่า 10.00 โอเปร่า 9
iOS iOS 1
Android 2.2

แน่นอนว่าไม่มีสิ่งใดง่ายอย่างที่ควรจะเป็น ข้อจำกัดเริ่มต้นของโค้ดข้างต้นคือ โค้ดนี้ไม่แสดงผล EOT ไปยัง IE 6-8 ไวยากรณ์แบบกันกระสุน @font-face ได้เสนอวิธีแก้ปัญหานี้ โดยมีเวอร์ชันที่มีประสิทธิภาพสูงตามมา

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}
โปรแกรมสร้างแบบอักษรกระรอก
โปรแกรมสร้างกระรอกแบบอักษร

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

สนับสนุนอุปกรณ์เคลื่อนที่หรือไม่

Safari บนอุปกรณ์เคลื่อนที่รองรับเว็บฟอนต์ SVG ตั้งแต่ iOS 3.1 และ Android รองรับ otf/ttf ตั้งแต่เวอร์ชัน 2.2 แต่ผู้ใช้อุปกรณ์เคลื่อนที่ควรได้รับประสบการณ์การพิมพ์ที่ดีขึ้นนี้ใช่หรือไม่ ขอแนะนำว่าไม่ใช่ สาเหตุหลักเกิดจากวิธีที่ WebKit จัดการข้อความที่รอแบบอักษรที่กำหนดเองผ่าน @font-face: ข้อความนั้นจะไม่แสดง ดังนั้นในการเชื่อมต่ออุปกรณ์เคลื่อนที่ที่มีแบนด์วิดท์ต่ำ ผู้ใช้จะไม่เห็นข้อความอีกจนกว่าจะมีการโหลดข้อมูลแบบอักษรประมาณ 50k ทีม Webkit พยายามหาวิธีเปิดใช้แบบอักษรสำรองหลังจาก 2-3 วินาทีหมดอายุแล้ว แต่จนกว่าสถานการณ์จะผ่านไป เราไม่ถือว่าเป็นเรื่องยุติธรรมที่จะทำให้ผู้ใช้ต้องเผชิญกับอุปสรรคดังกล่าวระหว่างผู้ใช้กับเนื้อหาของคุณ

บริการเว็บฟอนต์

บริการจำนวนมากรวมฟีเจอร์ @font-face ไว้ใน API ที่ใช้งานง่าย ซึ่งบ่อยครั้งจะให้คุณเพิ่ม CSS หรือบรรทัดสคริปต์บรรทัดเดียวลงใน HTML และการกำหนดค่าบางอย่าง เท่านี้ก็เรียบร้อย เช่น WebInk, Typekit และ Fontslive จะช่วยให้คุณใช้แบบอักษรได้ (บางครั้งอาจเกินขีดจำกัดแบนด์วิดท์) โดยเสียค่าธรรมเนียมรายเดือน การใช้บริการเหล่านี้สะดวกมากสำหรับนักพัฒนาซอฟต์แวร์ทั่วๆ ไป ทั้งยังสามารถขจัดความยุ่งยากในการใช้โซลูชันหลายเบราว์เซอร์ได้

Google Font API ช่วยให้คุณใช้ชุดแบบอักษรขนาดเล็กที่ได้รับใบอนุญาตอย่างอิสระ เพียงลิงก์กับสไตล์ชีตและให้ Google จัดการข้อกังวลเกี่ยวกับหลายเบราว์เซอร์และด้านประสิทธิภาพ นี่คือวิธีที่เร็วที่สุดในการเริ่มต้นใช้งานด้วยเว็บฟอนต์

กำลังค้นหาแบบตัวพิมพ์แบบมืออาชีพสำหรับ @font-face

สิ่งที่นักออกแบบมักจะประหลาดใจคือ เพียงเพราะคุณซื้อใบอนุญาตแบบอักษร (เช่น เพื่อใช้ในการออกแบบกราฟิก) ก็ไม่ได้หมายความว่าคุณจะใช้แบบอักษรนั้นใน @font-face ได้ ใบอนุญาตสำหรับ @font-face (หรือการฝังเว็บ) มักจะขายแยกกัน โปรดอ่านข้อตกลงอย่างละเอียดและโปรดติดต่อโรงหล่อแบบอักษรหากมีข้อสงสัย Fontspring เป็นร้านขายแบบอักษรที่จำหน่ายแบบอักษรคุณภาพระดับมืออาชีพหลายร้อยแบบ ซึ่งทั้งหมดอนุญาตให้ใช้กับ @font-face ได้ FontFont และบริษัทหล่ออื่นๆ ได้เริ่มขายใบอนุญาต @font-face โดยตรง แม้ว่าในปัจจุบันจะกำหนดเป้าหมายเฉพาะ WOFF และ EOT เท่านั้น ซึ่งทำให้ตลาดเบราว์เซอร์มีขนาดเล็กลง (แต่หดตัว) บริษัท Found จำนวนมากกำลังเพิ่มใบอนุญาต Webfont ลงในแคตตาล็อก แต่หากคุณไม่พบป้ายสำหรับแบบอักษรที่เลือก โปรดติดต่อบริษัทเพื่อสอบถามเกี่ยวกับแบบอักษรดังกล่าว

การรับมือกับ FOUT

Flash of Unstyled Text เป็นปรากฏการณ์ใน Firefox และ Opera ที่นักออกแบบเว็บบางรายชื่นชอบ เมื่อใช้แบบอักษรที่กำหนดเองผ่าน @font-face จะมีช่วงเวลาสั้นๆ คือตอนที่โหลดหน้าเว็บ ซึ่งยังไม่ได้ดาวน์โหลดและใช้แบบอักษรนั้น และมีการใช้แบบอักษรถัดไปในสแต็ก font-family ซึ่งจะทําให้แบบอักษรต่างๆ (ดูไม่ค่อยดี) ปรากฏขึ้นก่อนที่จะได้รับการอัปเกรด

ALT_TEXT_HERE
แฟลชของข้อความที่ไม่มีการจัดรูปแบบเกิดขึ้นกับชุดสไลด์ HTML5

มาพร้อมกับ Google Font API คือ WebFont Loader ซึ่งเป็นไลบรารี JavaScript ที่มีจุดประสงค์เพื่อให้บริการฮุกเหตุการณ์จำนวนมากเพื่อให้คุณควบคุมการโหลดได้เป็นอย่างมาก มาดูวิธีทำให้เบราว์เซอร์อื่นเลียนแบบการทำงานของ WebKit ในการซ่อนข้อความสำรองขณะโหลดแบบอักษร @font-face

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

ถ้าปิดใช้งาน JavaScript ไว้ ข้อความจะยังคงปรากฏให้เห็นตลอดเวลา และถ้าเกิดข้อผิดพลาดเกี่ยวกับแบบอักษร ข้อความจะกลับไปใช้ serif แบบพื้นฐานได้อย่างปลอดภัย ในตอนนี้ให้พิจารณาว่าเป็นการหยุดทำงานชั่วคราว เนื่องจากผู้เชี่ยวชาญด้านเว็บฟอนต์ส่วนใหญ่ต้องการซ่อนข้อความสำรองไว้ 2-5 วินาทีแล้วจึงค่อยแสดงข้อความดังกล่าว แบนด์วิดท์ต่ำและอุปกรณ์เคลื่อนที่จะได้รับประโยชน์อย่างมากจากระยะหมดเวลานี้ เราเข้าใจดีว่า Mozilla กำลังหาวิธีแก้ไขปัญหานี้ในเร็วๆ นี้

โซลูชันที่น้ำหนักเบาแต่มีประสิทธิภาพน้อยกว่าคือพร็อพเพอร์ตี้ font-size-adjust ซึ่งปัจจุบันรองรับเฉพาะใน Firefox เท่านั้น วิธีนี้ทำให้คุณมีโอกาสปรับ x-height ในสแต็กแบบอักษรให้เป็นปกติ ซึ่งจะลดจำนวนการเปลี่ยนแปลงที่มองเห็นได้ใน FOUT ที่จริงแล้ว โปรแกรมสร้าง Font Squirrel เพิ่งเพิ่มฟีเจอร์ที่บอกอัตราส่วนความสูง x ของแบบอักษรที่คุณอัปโหลด เพื่อให้คุณสามารถตั้งค่า font-size-adjust ได้อย่างถูกต้อง

สรุป

Webfont ให้อิสระแก่นักออกแบบเล็กน้อย และด้วยฟีเจอร์ที่กำลังจะเปิดตัว เช่น การแบ่งส่วนที่ใช้ความระมัดระวังและการจัดรูปแบบทางเลือก โฆษณาประเภทนี้จะมีความยืดหยุ่นมากกว่า ตอนนี้คุณมั่นใจได้เลยว่าจะนำส่วนนี้ของ CSS3 ไปใช้ เนื่องจากครอบคลุมเบราว์เซอร์ที่ใช้งานถึง 98% ขอให้สนุกกับการรับชม