บทความนี้สืบเนื่องจากผมได้เห็นน้อง ๆ ที่บริษัททำงานครับ เวลาที่เว็บของลูกค้านั้นจำเป็นต้องใช้ฟอนต์พิเศษต่าง ๆ ที่นอกเหนือจากในเว็บ Google Fonts ก็จะต้องนำฟอนต์ที่ลูกค้าหามาให้ไปแปลงไฟล์สำหรับใช้งานบนเว็บได้ ซึ่งก็สามารถแปลงแล้วใช้งานได้จริงครับ แต่เวลาที่ผมเห็นโค้ดแปลงพวกนั้นทีไรก็ชวนหงุดหงิดไปเสียทุกที วันนี้ผมก็เลยมาเขียนระบาย… เอ้ย เขียนแนะนำครับว่า ถ้าอยากเขียนให้ดี ๆ นั้น ควรจะเป็นอย่างไรครับ
สารบัญ
ปัญหาและตัวอย่างปัญหา
ปัญหาที่ผมกำลังจะพูดถึงนี้ก็คือการตั้งชื่อ font-family นั่นเองครับ ถ้าคุณอยู่วงการ Front-End นี้มานานพอก็น่าจะเคยเจอการตั้งชื่อ font-family หน้าตาแบบนี้กันมาบ้าง
@font-face { font-family: 'thaisans_neuelight'; src: url('thaisansneue-light-webfont.woff2') format('woff2'), url('thaisansneue-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
ถ้าจะสงสัยว่าโค้ดที่เห็นด้านบนนี้มันผิดอย่างไร ผมก็ต้องบอกว่ามันก็ไม่ผิดเลยครับ มันสามารถใช้งานได้ตามปกติ เพียงแค่มันดูไม่ make sense เท่าไหร่ถ้าจะใส่ไปทั้ง ๆ แบบนี้ จุดที่ผมมองว่ามันไม่ดีตามในตัวอย่างนี้มีอยู่ด้วยกัน 2 จุดครับ
- การตั้งชื่อ font-family ที่ใช้งานได้ยาก และเจาะจงเกินไป ดูไม่เหมือน font-family (ครอบครัวฟอนต์) เอาเสียเลย
- ถ้าจะอ่านจากชื่อ font-family จะเข้าใจว่ามันเป็นฟอนต์บาง เพราะมันมีคำว่า “light” อยู่ในชื่อใช่ไหมครับ แต่พอเหลือบมามอง font-weight แล้ว ดันเขียนว่า normal มันช่างชวนสับสนมากเลยทีเดียว
แล้วนอกจากปัญหา 2 ข้อนี้แล้ว ลองมองออกไปให้ไกลกว่านี้อีกเสียหน่อย ถ้าสมมติว่าเว็บนี้เกิดต้องใช้ฟอนต์ Thai Sans Neue หลากหลายน้ำหนักขึ้นมาละ จะทำยังไงดี? เพราะถ้าหากเขียนแบบนี้ต่อไป เวลาที่ต้องใช้ฟอนต์น้ำหนักอื่น ๆ ก็ต้องเปลี่ยนชื่อ font-family ไปด้วยทุกครั้งอย่างนั้นเลยเหรอ? แล้วถ้าในบทความเว็บนั้นเกิดใช้แท็ก <strong> ขึ้นมาละ มันก็คงจะหาฟอนต์ที่น้ำหนักหนากว่าในชื่อเดียวกันไม่เจอ (เพราะทุกน้ำหนักถูกตั้งชื่อแยกกันหมด) แทนที่จะดึงฟอนต์ที่มีน้ำหนักสวยงามออกมา กลายเป็นเบราเซอร์จะต้องทำการบวมฟอนต์ให้เอง ไม่สวยตามที่คนทำชุดฟอนต์กำหนดมาให้… ในฐานะผมเป็น Front-End Web Developer ผมว่านี่คือเรื่องใหญ่นะครับ!
แล้วปัญหานี้มาจากไหนละ?
อันเนื่องจากชาวไทยนั้น หลายคนมาก ๆ ที่รู้จักเว็บ Font Squirrel ซึ่งเป็นเว็บที่มีเครื่องมือแสนสะดวกช่วยเราแปลงฟอนต์เพื่อให้ใช้งานบนเว็บไซต์ได้อย่างง่ายดาย ที่สำคัญยังทำไฟล์ CSS ให้เราไปใส่บนเว็บไซต์ได้เลยอีกต่างหาก ก็เลยเคยชินครับ แปลงเสร็จ-ยัดเว็บ จบ ไม่ได้ดูลึกลงไปในรายละเอียดว่าตัวเองนั้นกำลังทำอะไรอยู่
และนี่คือตัวอย่าง CSS ที่ได้จากการนำฟอนต์ 2 สไตล์ 2 น้ำหนักไปทำการแปลงบนเว็บ Font Squirrel ครับ
@font-face { font-family: 'thaisans_neuelight'; src: url('thaisansneue-light-webfont.woff2') format('woff2'), url('thaisansneue-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'thaisans_neuelight_italic'; src: url('thaisansneue-lightitalic-webfont.woff2') format('woff2'), url('thaisansneue-lightitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'thaisans_neuesemi_bold'; src: url('thaisansneue-semibold-webfont.woff2') format('woff2'), url('thaisansneue-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'thaisans_neuesemi_bold_italic'; src: url('thaisansneue-semibolditalic-webfont.woff2') format('woff2'), url('thaisansneue-semibolditalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
สังเกตไหมครับว่า ฟอนต์เดียวกันแท้ ๆ แต่ family ชื่อไม่เหมือนกันเลย แบบนี้เสียระบบ font-family หมดเลยครับ!
เวลาที่เราต้องใช้งานกับโค้ดตามตัวอย่างด้านบนจะเป็นอย่างนี้ครับ
body { font-family: 'thaisans_neuelight', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'thaisans_neuesemi_bold'; } strong { font-family: 'thaisans_neuesemi_bold'; } em { font-family: 'thaisans_neuelight_italic'; } .custom-heading { font-family: 'thaisans_neuesemi_bold_italic'; }
เรียกได้ว่าอุบาทว์มากในสายตาของผม
ตัวอย่างที่ดี
เพื่อให้เข้าใจอย่างรวดเร็ว ผมแนะนำให้ลองดูตัวอย่างที่ดีครับ ซึ่งฟอนต์ที่อยู่บน Google Fonts นั้นเป็นตัวอย่างที่ดีทั้งหมดเลยครับ แต่ในที่นี้ผมขอยกตัวอย่างเป็นฟอนต์ Open Sans แล้วกันครับ
อย่างไรก็ตามตัวอย่างนี้ผมมีการปรับโค้ดเล็กน้อย เพื่อให้เป็นตัวอย่างสั้น ๆ ครับ เพราะโค้ดจริงของ Google นั้นมีการใส่กฎไว้ละเอียดมาก ๆ เช่น unicode-range หากต้องการดูโค้ดเต็มสามารถเข้าได้จากลิงก์ CSS ของ Open Sans ครับ
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWyV9hmIqOjjg.woff2) format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKXGUdhmIqOjjg.woff2) format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OX-hpOqc.woff2) format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOX-hpOqc.woff2) format('woff2'); }
จากตัวอย่างที่ดีของ Google จะสังเกตเห็นได้ว่า ชื่อ font-family ของทุก ๆ ฟอนต์นั้นเหมือนกันหมด รวมถึงการกำหนด font-weight และ font-style ก็ตรงตามตัวไฟล์ฟอนต์ นั่นทำให้ทุกอย่าง make sense ไม่สับสนระหว่างใช้งาน และไม่เสียระบบของ font-family ที่ควรจะเป็นครับ
แนวทางการแก้ปัญหา
ถ้าอ่านไล่มาจนถึงจุดนี้ ผมคิดว่าท่าน ๆ คงจะพอเดาได้แล้วละครับว่า ต่อไปเราควรจะทำอย่างไรดี แต่ถ้าหากยังไม่แน่ใจละก็ ผมจะลองนำ font-family: Thai Sans Neue ที่เป็นตัวอย่างที่มีปัญหาในตอนแรกมาปรับให้เป็นโค้ดที่ดูดีให้ดูกันครับ
@font-face { font-family: 'Thai Sans Neue'; src: url('thaisansneue-light-webfont.woff2') format('woff2'), url('thaisansneue-light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Thai Sans Neue'; src: url('thaisansneue-lightitalic-webfont.woff2') format('woff2'), url('thaisansneue-lightitalic-webfont.woff') format('woff'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Thai Sans Neue'; src: url('thaisansneue-semibold-webfont.woff2') format('woff2'), url('thaisansneue-semibold-webfont.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Thai Sans Neue'; src: url('thaisansneue-semibolditalic-webfont.woff2') format('woff2'), url('thaisansneue-semibolditalic-webfont.woff') format('woff'); font-weight: 600; font-style: italic; }
สิ่งที่ผมทำคือ ปรับชื่อ font-family ให้เป็นชื่อเดียวกันครับ จากนั้นก็แก้ไข font-weight และ font-style ให้ตรงกับลักษณะของไฟล์ฟอนต์นั้น ๆ แค่นี้เองครับ ง่ายใช่ไหมล่ะ!
เวลาที่นำไปใช้ ก็จะมีความยืดหยุ่นมากกว่าครับ ลองคิดดูว่าเรากำหนดที่ <body> เลยว่าจะใช้ฟอนต์ “Thai Sans Neue” แล้วแท็กที่เหลืออย่าง <h1>, <strong>, <em> ฯลฯ ก็จะสามารถดึงฟอนต์มาใช้งานได้อย่างถูกต้อง โดยที่เราไม่ต้องมากำหนดทุกตัวว่าต้องดึงฟอนต์ไหนชื่อไหนอีกต่อไปโดยไม่จำเป็น เรากำหนดแค่รายละเอียดพอ
และนี่คือโค้ดเมื่อใช้ตามตัวอย่างที่ผมแก้ให้ดีงามพระรามแปดแล้วครับ
body { font-family: 'Thai Sans Neue', sans-serif; font-weight: 300; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } strong { font-weight: 600; } em { font-style: italic; } .custom-heading { font-weight: 600; font-style: italic; }
สวยงาม ถูกหลักการ งานดีครับผม 😆
แถมนิดนึง
อาจจะมีคนสงสัยก็ได้ว่า เอ… แล้วเราจะรู้ตัวเลขน้ำหนักจากชื่อฟอนต์ได้อย่างไร ซึ่งอันที่จริงแล้วมันก็มีมาตรฐานในการตั้งชื่ออยู่ระดับนึงเหมือนกันครับ
ชื่อนำหนัก | font-weight |
---|---|
Thin | 100 |
Extra-Light | 200 |
Light | 300 |
Regular | normal, 400 |
Medium | 500 |
Semi-Bold | 600 |
Bold | bold, 700 |
Extra-Bold | 800 |
Black | 900 |
นอกจากนั้นแล้วผมยังอยากจะขอแนะนำเว็บแปลงฟอนต์ที่ทำงานได้ฉลาดกว่า Font Squirrel อีกหนึ่งเว็บครับ ซึ่งผมก็ใช้เว็บนี้ทุกครั้งที่ต้องแปลงฟอนต์เลยทีเดียว ได้แก่เว็บ Transfonter ซึ่งเว็บนี้ทำงานได้เร็วกว่า แถมยังสามารถรวบฟอนต์ให้เป็น Family เดียวกันได้ด้วยครับ
…แต่ไม่ว่าจะสะดวกสบายแค่ไหน ก็ต้องอย่างลืมเช็กด้วยนะครับว่ามันแปลงโค้ดมาได้ถูกต้องแล้วจริง ๆ ของพวกนี้อย่าไปไว้ใจมันมากนักครับ 😆 ดังนั้นผมขอแนะนำว่าก่อนจะใช้เครื่องมืออำนวยความสะดวก ไม่ว่าจะเป็นอะไรก็ตาม เราควรจะเข้าใจถึงหลักการการทำงานของมันให้ดีเสียก่อน อย่าสักแต่ใช้ ๆ ไปให้มันเสร็จแบบนี้ไม่เอาครับ เพราะเราจะไม่ได้เรียนรู้อะไรเลย!
สรุป
ทั้งหมดนี้ก็เป็นแนวทางที่ดีที่ผมพอจะแนะนำได้ครับ ผมคงไม่สามารถจะไปบังคับให้ใครทำตามแบบนี้ได้ เพราะท้ายสุดแล้วมีเพียงเจ้าของโปรเจ็กต์อย่างคุณเท่านั้นครับ ที่จะเป็นคนตัดสินใจว่าแบบไหนกันที่จะเหมาะสมกับงานที่กำลังทำอยู่ กับทีมที่คุณอยู่ร่วมด้วย
ผมก็ได้แต่หวังว่าบทความนี้จะเป็นประโยชน์แก่ทุกท่านครับ หากมีอะไรสงสัยอยากถามเพิ่มเติม สามารถคอมเมนต์ได้ด้านล่างเลยนะครับ
ปล. บทความนี้แชร์ได้ไม่จำกัด ก็อปไปแปะผมก็ไม่ว่า ขอแค่ใส่ลิงก์กลับมาที่นี่ด้วยครับ เพราะผมอยากได้ backlink (ขายตรงไปไหม) หรือไม่ก็กดดูโฆษณาบนเว็บสักครั้งก็ได้ครับ แปะมาจะครึ่งปีแล้ว ไม่มีใครกดเลยครับ 🙁 ← ความจริงคือไม่ได้เขียนบล็อกมาเป็นปี ๆ แล้วต่างหาก 😆