หลักการรวม Font ภาษาอังกฤษ และภาษาไทยรวมกัน โดยให้ระบบ Identify ว่าอักขระนี้เป็นภาษาไทยหรือภาษาอังกฤษ และดึงฟอนต์มาแสดงตามภาษานั้น ๆ ทำได้ดังต่อไปนี้ครับ
Step 1: ดึงฟอนต์มาทั้ง 2 ภาษา
สมมุติว่าผมจะใช้ Font Roboto สำหรับภาษาอังกฤษและ Noto Sans Thai สำหรับภาษาไทย โดยที่ผมดึง Font มาแล้วในเว็บโดยทำแบบ Local (มีไฟล์ฟอนต์จริง ๆ โดยที่ไม่ดึงโดยตรงจาก Google Fonts) มาด้วยโค้ดประมาณนี้ครับ โดยใส่ไว้ในไฟล์ css หลักของผม โดยจะทำยังไงก็ได้นะครับ อันนี้เป็นตัวอย่าง บางท่านใช้ Plugin Wordpress ที่สามารถดึงได้โดยตรงไม่ต้องโค้ด ก็ได้นะครับ หรือบางท่านแปะ code Google Fonts เลย ถ้าดึงมาแล้วติดก็โอเคครับ
<!-- Load Font Roboto -->
@font-face {
font-family: "Roboto";
src: url('fonts/roboto/Roboto-Regular.eot');
src: url('fonts/roboto/Roboto-Regular.eot') format('embedded-opentype'),
url('fonts/roboto/Roboto-Regular.woff2') format('woff2'),
url('fonts/roboto/Roboto-Regular.woff') format('woff'),
url('fonts/roboto/Roboto-Regular.ttf') format('truetype');
}
<!-- Load Font Noto Sans Thai -->
@font-face {
font-family: "noto-sans-thai";
src: url('fonts/notosansthai/notosansthai-Regular.eot');
src: url('fonts/notosansthai/notosansthai-Regular.eot') format('embedded-opentype'),
url('fonts/notosansthai/notosansthai-Regular.woff2') format('woff2'),
url('fonts/notosansthai/notosansthai-Regular.woff') format('woff'),
url('fonts/notosansthai/notosansthai-Regular.ttf') format('truetype');
}Step 2: ดึงฟอนต์มาทั้ง 2 ภาษา
พอเว็บผมโหลดฟอนต์ Roboto และ Noto Sans Thai แล้ว ผมก็ดึงมาใช้งานโดยทำเป็น Font Face ครับ
@font-face {
font-family: 'Roboto';
}
@font-face {
font-family: 'noto-sans-thai';
unicode-range: U+0E00–U+0E7F;
}โดยจะสังเกตว่า @font-face อันที่สอง (noto-sans-thai) มีส่วนของ unicode-range เข้ามาเกี่ยวข้องด้วย นั่นคือย่านของภาษาไทยเราใน unicode นั่นเองครับ โดยเราเลือกให้ย่านนี้เป็นภาษาไทย และให้ apply font นี้เข้าไปครับ
Step 3: เอาไปใช้งาน
ดึงมาอย่างเดียวไม่พอครับ ต้องเอาไปใช้งานด้วยครับ โดยที่จะ apply กับ element ไหนก็ได้ครับเช่น body, p, h1, h2, h3 ฯลฯ ตามต้องการเลยครับ ขึ้นกับโครงสร้าง code ด้วยครับ แต่เพื่อให้เป็น universal ผมทำแบบนี้ครับ
h1, h2, h3, h4, h5, h6, a, button, input, b, strong, span, nav, p, body {
font-family: 'Roboto', 'noto-sans-thai';
}เท่านี้เป็นอันเสร็จพิธีครับ สามารถลองตรวจเช็คหน้าเว็บได้เลยนะครับว่าฟอนต์ไทยอังกฤษมาถูกต้องไหมครับ
