<h1>ตัวอย่างฟอนต์ Noto Sans Thai เวอร์ชันใหม่</h1>

<p>
  <textarea rows="5" placeholder="พิมพ์ข้อความเพื่อทดสอบ"></textarea>
</p>
<h2>ตัวอย่างบทความ</h2>
<small><em>ที่มา <a href="https://th.wikipedia.org/wiki/%E0%B9%84%E0%B8%97%E0%B8%9B%E0%B9%8C%E0%B9%80%E0%B8%9F%E0%B8%8B" target="_blank">Wikipedia</a> - CC BY SA 3.0</em></small>
<p>ไทป์เฟซ หรือ ฟอนต์ หรือในชื่อไทยว่า ชุดแบบอักษร (อังกฤษ: typeface หรือ font) คือชุดของรูปอักขระ (glyph) ที่ได้รับการออกแบบไว้อย่างเป็นเอกภาพด้วยรูปแบบเฉพาะตัว ไทป์เฟซอาจประกอบด้วยตัวอักษร ตัวเลข เครื่องหมายวรรคตอน และอาจรวมไปถึงอักษรภาพ (ideogram) เช่นอักษรจีนหรือสัญลักษณ์ต่างๆ เช่นสัญลักษณ์ทางคณิตศาสตร์หรือทางเทคนิค</p>
<h3>ความแตกต่างของไทป์เฟซกับฟอนต์</h3>
<p>บุคคลทั่วไปมักใช้คำว่า ฟอนต์ (font/fount) เรียกแทนไทป์เฟซ หรือใช้เรียกสลับกัน แต่ในความจริงแล้วมีความหมายที่แตกต่างกัน ไทป์เฟซหมายถึงชุดตัวอักษรที่มีรูปแบบเดียวกัน ไม่ว่าจะมีขนาดใหญ่เล็กเท่าไร เช่น Arial, Arial Bold, Arial Italic และ Arial Bold Italic ต่างเป็นไทป์เฟซคนละชนิดกัน ส่วนฟอนต์จะหมายถึงชุดตัวอักษรที่มีทั้งไทป์เฟซและขนาดเดียวกัน ตัวอย่างเช่น Arial 12 พอยต์ก็เป็นฟอนต์หนึ่ง Arial 14 พอยต์ก็เป็นฟอนต์หนึ่ง Arial Bold 14 พอยต์ก็เป็นอีกฟอนต์หนึ่ง เป็นต้น ในการสร้างเอกสารแบบดิจิทัล ผู้ใช้สามารถเปลี่ยนขนาดฟอนต์ได้เองในคอมพิวเตอร์ ทำให้ความแตกต่างของไทป์เฟซกับฟอนต์จึงลดความสำคัญลงไป</p>
<p>สำหรับตระกูลหรือสกุลของตัวอักษร (font/type family) มีความหมายกว้างกว่าไทป์เฟซ กล่าวคือ แบบตัวอักษรชื่อเดียวกันที่อาจมีรูปแบบต่างๆ กัน ถือเป็นแบบอักษรตระกูลเดียวกัน โดยปกติจะมี 4 รูปแบบคือ roman, italic, bold, bold italic แบบอักษรบางตระกูลอาจมี narrow, condensed หรือ black อยู่ด้วยก็ได้ ดังนั้น Arial, Arial Bold, Arial Italic และ Arial Bold Italic ทั้งหมดเป็นแบบอักษรในตระกูล Arial ในขณะที่ Helvetica หรือ Courier ก็เป็นอีกตระกูลหนึ่ง</p>
<hr/>
<h2>คำไทยแบบสุ่ม</h2>
<small><em>สร้างด้วย <a href="http://lorem.in.th" target="_blank">lorem.in.th</a></em></small>
<p>ศิลปากรคอมเมนท์เทเลกราฟ มั้ยฟิวเจอร์สโตร์ แฟกซ์ ถ่ายทำแพลนเพนตากอนแมชีน วอลนัทคอมเมนท์แชมป์พรีเมียม แอปเปิ้ล ปิโตรเคมีเซ็นเตอร์ไฮเปอร์ ต่อรอง บอยคอตต์ไฮบริดวีไอพี แอปเปิลแอคทีฟแชมเปี้ยนโพลล์ไฟลท์ คอนเทนเนอร์ กีวีซีอีโอ เซ่นไหว้ไดเอ็ตเปราะบางวอล์ก มาเฟียแฟร์วันเวย์ฮาโลวีน
  อุรังคธาตุยิวศากยบุตรเกรย์ละติน ไฟแนนซ์สามแยกแจ็กพอตเหมย</p>
<p>ปทุมธานีอ่างขางบุรีรัมย์ล้านช้างน่าน สมุทรสาคร แม่ฮ่องสอนนครศรีธรรมราชล้านช้างพังงาพัทลุง อำนาจเจริญล้านนากรุงเทพนครปฐมอุดรธานี ปัตตานีแม่ฮ่องสอนเพชรบูรณ์นครพนมอยุธยา มหาสารคามระนองกาญจนบุรีสตูลถลาง จตุจักรลำปาง นราธิวาสปทุมธานีชัยภูมิราชบุรี สระบุรีแม่ฮ่องสอนทวาราวดีลาดพร้าว
  สุราษฎร์มหาสารคามรังสิตสุรินทร์มุกดาหาร กาญจนบุรีถลางหนองบัวลำภู ลันตาจันทบุรี นราธิวาส อุตรดิตถ์สมุทรปราการ นราธิวาสสุรินทร์อ่างทองพิจิตร</p>
<p>คึ่นฉ่ายหยอมแหยมพลูโตเนียมทิฏฐิคาทอลิค อีรุงตุงนังหยอยทรมาณ กุฎฐังฃวด ทิฏฐิพนิชพากษ์ ศรีษะอัตคัตบ๊องแบ๊ว อะดรีนาลีน เฟิร์น ยากี้อัตคัตอุลตรา วิศิษฐ์พยักเพยิดทิฏฐิสาราณียากรโปรเตสแตนท์ สุกี้ยากี้ ฤาษีโอกาศคลีนิค แคตตาล็อกสัตตสดกล็อคสาราณียากร กุฎฐังวันทยาหัตถ์วันทยาหัตถ์
  คลีนิกโปรเตสแตนท์ กงเต็กพากษ์ ทิฏฐิแซ่ด</p>
<p>ฟลูออเรสเซนซ์แอสพาร์แตมอันโดรเมดาอินทิกรัล พอลิเมอร์เวก้าเมทริกซ์ออโรร่าเคอราติน พันธุศาสตร์สเกลาร์ แกนีมีดฟลูออเรสเซนซ์เมทริกซ์ อันโดรเมดา พันธุศาสตร์คอนดักเตอร์ไคโตซาน ฟอสซิล เคอราตินไดออกไซด์ไดนามิกไซบอร์ก อะซีโตนดอปเพลอร์อัลตราซาวนด์ เมลามีนไฮดรอกไซด์แคสสินี
  ซิริอุส ควอนตัมคอปเปอร์ คอนดักเตอร์ ฟลูออไรด์จุลชีววิทยาอัลตราซาวด์ ออกเทนเอ็กซ์โพเนนเชียลแอนดรอยด์ออกเทน โครมาโทกราฟีเพอร์ออกไซด์โมเมนตัมเนกาตีฟอะลูมินา</p>
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts-cdn.pakin.me/fonts/NotoSansThai/NotoSansThaiUI-Regular.woff2") format("woff2"), url("https://fonts-cdn.pakin.me/fonts/NotoSansThai/NotoSansThaiUI-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  src: url("https://fonts-cdn.pakin.me/fonts/NotoSansThai/NotoSansThaiUI-Bold.woff2") format("woff2"), url("https://fonts-cdn.pakin.me/fonts/NotoSansThai/NotoSansThaiUI-Bold.woff") format("woff");
}

html {
  font-size: 16px;
}

body,
textarea {
  font-family: "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  color: #212121;
}

textarea {
  width: 85%;
  border: 2px solid #212121;
  padding: 8px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.