บทความนี้สืบเนื่องจากผมได้เห็นน้อง ๆ ที่บริษัททำงานครับ เวลาที่เว็บของลูกค้านั้นจำเป็นต้องใช้ฟอนต์พิเศษต่าง ๆ ที่นอกเหนือจากในเว็บ Google Fonts ก็จะต้องนำฟอนต์ที่ลูกค้าหามาให้ไปแปลงไฟล์สำหรับใช้งานบนเว็บได้ ซึ่งก็สามารถแปลงแล้วใช้งานได้จริงครับ แต่เวลาที่ผมเห็นโค้ดแปลงพวกนั้นทีไรก็ชวนหงุดหงิดไปเสียทุกที วันนี้ผมก็เลยมาเขียนระบาย… เอ้ย เขียนแนะนำครับว่า ถ้าอยากเขียนให้ดี ๆ นั้น ควรจะเป็นอย่างไรครับ

สารบัญ

  1. ปัญหาและตัวอย่างปัญหา
  2. ต้นตอของปัญหา
  3. ตัวอย่างที่ดี
  4. แนวทางการแก้ปัญหา
  5. สรุป

ปัญหาและตัวอย่างปัญหา

ปัญหาที่ผมกำลังจะพูดถึงนี้ก็คือการตั้งชื่อ 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 จุดครับ

  1. การตั้งชื่อ font-family ที่ใช้งานได้ยาก และเจาะจงเกินไป ดูไม่เหมือน font-family (ครอบครัวฟอนต์) เอาเสียเลย
  2. ถ้าจะอ่านจากชื่อ 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 (ขายตรงไปไหม) หรือไม่ก็กดดูโฆษณาบนเว็บสักครั้งก็ได้ครับ แปะมาจะครึ่งปีแล้ว ไม่มีใครกดเลยครับ 🙁 ← ความจริงคือไม่ได้เขียนบล็อกมาเป็นปี ๆ แล้วต่างหาก 😆