CSS ฟอนต์

CSS ความสามารถของแบบอักษรกำหนดรูปแบบของอักษร ขนาด หนาแน่น รูปแบบ (เช่น ออกหลัง) และรูปร่าง (เช่น ตัวหนาแน่นเล็ก)

CSS ลำดับฟอนต์

ใน CSS มีชื่อลำดับฟอนต์ทั้งหมดสองชนิดที่แตกต่างกัน:

  • ลำดับฟอนต์ทั่วไป - กลุ่มฟอนต์ที่มีที่มากันมากกว่า (เช่น "Serif" หรือ "Monospace")
  • ลำดับฟอนต์เฉพาะ - ลำดับฟอนต์ที่เฉพาะ (เช่น "Times" หรือ "Courier")

นอกจากลำดับฟอนต์เฉพาะ ลูกตัวอักษร CSS ก็ได้กำหนดลำดับฟอนต์ทั่วไปทั้งห้าชนิด:

  • ฟอนต์ Serif
  • ฟอนต์ Sans-serif
  • ฟอนต์ Monospace
  • ฟอนต์ Cursive
  • ฟอนต์ Fantasy

ถ้าคุณต้องการทราบข้อมูลเกี่ยวกับลำดับฟอนต์เพิ่มเติม โปรดอ่าน CSS ลำดับฟอนต์.

ลำดับฟอนต์ที่กำหนด

ใช้ คุณสมบัติ font-family กำหนดลำดับฟอนต์ของข้อความ

ใช้ลำดับฟอนต์ทั่วไป

ถ้าคุณต้องการให้เอกสารใช้ฟอนต์ sans-serif แต่คุณไม่ได้เกี่ยวใจกับชื่อฟอนต์ที่ใช้ แล้วก็เป็นคำประกาศที่เหมาะสม

body {font-family: sans-serif;}

親自試一試

สำนักงานต่างประเทศจะเลือกฟอนต์จากลำดับฟอนต์ sans-serif (เช่น Helvetica) และนำมาใช้ในองค์ประกอบ body ซึ่งมีการสืบทอด ฟอนต์นี้จะถูกนำมาใช้กับองค์ประกอบทั้งหมดที่อยู่ในองค์ประกอบ body ด้วยเช่นกัน แต่หากมีกฎเลือกที่เฉพาะกว่านั้นก็จะนำมาเอานอกเป็นต้นไป

ลำดับฟอนต์ที่กำหนด

นอกจากการใช้ลำดับฟอนต์ทั่วไป คุณยังสามารถกำหนดฟอนต์ที่เฉพาะกว่าด้วยคุณสมบัติ font-family

ตัวอย่างด้านล่างนี้จัดตั้งฟอนต์ Georgia สำหรับองค์ประกอบ h1 ทั้งหมด:

h1 {font-family: Georgia;}

親自試一試

กฎนี้จะก่อให้เกิดปัญหาอื่นด้วย ถ้าสำนักงานต่างประเทศไม่มีฟอนต์ Georgia แล้ว ก็จะต้องใช้ฟอนต์ปริมาณเริ่มต้นของสำนักงานต่างประเทศเพื่อแสดงองค์ประกอบ h1

เราสามารถแก้ปัญหานี้ด้วยการรวมตัวอักษรที่มีชื่อฟอนต์เฉพาะกับลำดับฟอนต์ทั่วไปเพื่อแก้ปัญหานี้:

h1 {font-family: Georgia, serif;}

親自試一試

ถ้าผู้อ่านไม่ได้ติดตั้ง Georgia แต่ได้ติดตั้ง Times ฟอนต์ (ฟอนต์ในลำดับ serif ฟอนต์แบบภาษาอังกฤษ) สำนักงานต่างประเทศอาจใช้ Times สำหรับองค์ประกอบ h1 โดยที่ Times แม้จะไม่ตรงกับ Georgia แต่อย่างไรก็ตามมันยังเพียงพอที่จะให้ความใกล้ชิดเพียงพอ

ดังนั้น เราแนะนำให้มีลูกตัวอักษรสากลทั่วไปในกฎ font-family ทุกตัว ซึ่งจะให้มีหลายทางออก เมื่อสำนักงานต่างประเทศไม่สามารถให้กำหนดตัวอักษรที่ตรงกับกฎที่กำหนดไว้ได้ คุณสามารถเลือกตัวอักษรตัวที่มีโอกาสที่ดีที่สุดได้

ถ้าคุณมีความเข้าใจตัวอักษรสีขาวอย่างดี คุณก็สามารถกำหนดลูกตัวอักษรที่คล้ายกันเป็นกลุ่มได้สำหรับองค์ประกอบที่กำหนดมาแล้ว โดยจะต้องจัดลำดับตัวอักษรดังกล่าวตามความสำคัญและเชื่อมต่อด้วยคำวางหลังค์เป็นต้นไป:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

親自試一試

ตามรายการนี้ ตัวแทนปฏิบัติการจะค้นหาตัวอักษรตามลำดับที่กำหนด และถ้าตัวอักษรทั้งหมดไม่พบ จะเลือกตัวอักษร serif ที่พบแรก

ใช้ประกาย

คุณอาจจะสังเกตว่าในตัวอย่างด้านบนใช้ประกายเปลี่ยน และเมื่อชื่อตัวอักษรมีช่องว่าง (เช่น New York) หรือเมื่อชื่อตัวอักษรประกอบด้วยสัญลักษณ์เช่น # หรือ $ ต้องใช้ประกายในการประกาศ font-family

ใช้ประกายเปลี่ยนหรือประกายซ้อนก็ได้ แต่ถ้าจะใส่ค่า font-family ใน attribute style ของ HTML ต้องใช้ประกายที่ไม่ถูกใช้ในค่า attribute ดังกล่าว

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

親自試一試

font-style 属性

font-style 属性ใช้บ่อยที่สุดเพื่อกำหนดข้อความitalic

นี่คือค่าสามค่า

  • normal - แสดงข้อความในสไตล์ตั้งตรง
  • italic - แสดงข้อความในสไตล์italic
  • oblique - แสดงข้อความที่เลื่อนขึ้นออกไป

實例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

親自試一試

ความแตกต่างของ italic และ oblique

font-style มีความเรียบง่ายมาก: ใช้เลือกข้อความทั่วไป italic และ oblique ของข้อความ สิ่งที่หนักแน่นขึ้นเพียงแค่เพื่อแยกข้อความ italic และ oblique อย่างชัดเจน

italic คือสไตล์ของตัวอักษรที่เรียบง่าย ที่มีการเปลี่ยนแปลงขนาดของตัวอักษรเล็กๆ บางตัวเพื่อแสดงที่มีการเปลี่ยนแปลงรูปร่าง ขณะที่ oblique ของข้อความเป็นสัญลักษณ์ของข้อความตั้งตรงที่มีการเลื่อนขึ้นออกไป

ในสถานการณ์ทั่วไป italic และ oblique ของข้อความมองเห็นในเว็บเบราเซอร์เป็นหนึ่งอย่าง

font-style 属性

font-variant 属性สามารถกำหนดข้อความใหญ่เล็กได้

ข้อความใหญ่เล็กไม่ใช่ใหญ่ของตัวอักษรทั่วไป และไม่ใช่ตัวอักษรเล็ก ตัวอักษรนี้ใช้ตัวอักษรใหญ่ขนาดต่างกัน

實例

p {font-variant:small-caps;}

親自試一試

เข้มของตัวอักษร

font-weight โปรพริตีตั้งความเข้มของข้อความ

ใช้คำว่า bold ในการตั้งขนาดของตัวอักษรเป็นแบบหนัก

คำว่า 100 ถึง 900 กำหนดระดับเข้มของตัวอักษร 9 ระดับ ถ้าตัวอักษรมีระดับเข้มของตัวอักษรที่กำหนดล่วงหน้า ตัวเลขเหล่านี้จะตรงกันกับระดับที่กำหนดล่วงหน้า 100 ตรงกันกับระดับที่แบบเรียบร้อยที่สุด 900 ตรงกันกับระดับที่แบบเรียบร้อยที่หนักที่สุด ตัวเลข 400 ยอดเท่ากับ normal และ 700 ยอดเท่ากับ bold

ถ้ากำหนดความเข้มขององค์ประกอบเป็น bolder ตามที่สืบทอดมา บราวเซอร์จะตั้งความเข้มของตัวอักษรในระดับที่เหนือของค่าที่สืบทอดมา ในที่ตรงกันข้าม คำว่า lighter จะทำให้ความเข้มของตัวอักษรลดลงแทนที่จะเพิ่มขึ้น

實例

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

親自試一試

ขนาดตัวอักษร

font-size โปรพริตีตั้งขนาดของข้อความ

การสามารถจัดการขนาดของข้อความมีความสำคัญในด้านการออกแบบเว็บ แต่คุณไม่ควรปรับขนาดของข้อความเพื่อที่จะทำให้ย่อหน้าดูเหมือนหัวเรื่อง หรือทำให้หัวเรื่องดูเหมือนย่อหน้า

เป็นที่สำคัญที่คุณจะต้องใช้ HTML หัวเรื่องที่ถูกต้อง อย่างเช่นใช้ <h1> - <h6> สำหรับหัวเรื่อง และใช้ <p> สำหรับย่อหน้า

ค่า font-size สามารถเป็นขนาดแบบอิสระหรือขนาดเปอร์เซ็นต์

ขนาดแบบอิสระ

  • ตั้งขนาดของข้อความเป็นขนาดที่กำหนด
  • ไม่อนุญาตให้ผู้ใช้ปรับขนาดของข้อความในเว็บเบราว์เซอร์ทุกตัว (ไม่เป็นประโยชน์ต่อความสะดวกในการใช้งาน)
  • ขนาดแบบอิสระมีประโยชน์มากเมื่อเรียกใช้ขนาดทางฟิสิกส์ของการออกแบบ

ขนาดเปอร์เซ็นต์

  • ตั้งขนาดของข้อความเป็นเปอร์เซ็นต์ต่อองค์ประกอบรอบๆ
  • อนุญาตให้ผู้ใช้ปรับขนาดของข้อความในเว็บเบราว์เซอร์

จำเป็นต้องระวังถ้าคุณไม่ได้กำหนดขนาดของตัวอักษร ข้อความปกติ (เช่น ย่อหน้า) จะมีขนาดเริ่มต้นที่ 16 พิกเซล (16px = 1em)

ใช้พิกเซลในการตั้งขนาดของตัวอักษร

การตั้งขนาดของข้อความด้วยพิกเซลสามารถควบคุมขนาดของข้อความได้อย่างเต็มที่

實例

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

親自試一試

ใน Firefox, Chrome และ Safari สามารถปรับขนาดของข้อความในตัวอย่างที่กล่าวข้างต้นได้ แต่ใน Internet Explorer ไม่สามารถปรับได้

ถึงแม้จะสามารถปรับขนาดของข้อความด้วยเครื่องมือการขยายในเว็บเบราว์เซอร์ แต่นี่เป็นการปรับขนาดของหน้าเว็บทั้งหมด ไม่ได้จำกัดเพียงโดยเฉพาะข้อความ

ใช้ em ในการตั้งขนาดของตัวอักษร

ถ้าต้องการป้องกันปัญหาที่ไม่สามารถปรับขนาดของข้อความใน Internet Explorer ได้ ผู้พัฒนาหลายคนใช้หน่วยเมตรเอมเพื่อแทนที่จุดจุดขนาดพิกเซล

W3C 推薦使用 em 尺寸單位。

1em 等於當前的字體尺寸。如果一个元素的 font-size 為 16 像素，那麼對於該元素，1em 就等於 16 像素。在設定字體大小时，em 的值會相對於父元素的字體大小改變。

瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。

可以使用以下這個公式將像素轉換為 em：pixels/16=em

（註：16 等於父元素的默認字體大小，假設父元素的 font-size 為 20px，那麼公式需改為：pixels/20=em）

實例

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

親自試一試

在上面的例子中，以 em 為單位的文本大小與前一個例子中以像素計的文本是相同的。不過，如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。

不幸的是，在 IE 中仍然存在問題。在重設文本大小时，會比正常的尺寸更大或更小。

結合使用百分比和 EM

在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設定默認的 font-size 值：

實例

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

親自試一試

我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，並允許所有瀏覽器縮放文本的大小。

CSS 字體實例：

設定文本的字體
本例演示如何設定文本字體。
設定字體尺寸
本例演示如何設定字體尺寸。
設定字體風格
本例演示如何設定字體風格。
設定字體的異體
本例演示如何設定字體的異體。
設定字體的粗細
本例演示如何設定字體的粗細。
所有字體屬性在一個聲明之内
本例演示如何使用簡寫屬性將字體屬性設定在一個聲明之内。

CSS 字體屬性

屬性 描述
font 属性簡寫。作用是將所有針對字體的屬性設定在一個聲明中。
font-family ตั้งลำดับฟอนต์
font-size ตั้งขนาดฟอนต์
font-size-adjust ปรับขนาดฟอนต์ที่ใช้แทนอัตโนมัติเมื่อฟอนต์ที่เลือกไม่สามารถใช้งานได้ (CSS2.1 ได้ลบคุณสมบัตินี้ไปแล้ว)
font-stretch ขยายฟอนต์ตามทิศทางน้ำเนียน (CSS2.1 ได้ลบคุณสมบัตินี้ไปแล้ว)
font-style ตั้งรูปแบบฟอนต์
font-variant แสดงข้อความด้วยฟอนต์ขนาดเล็กหรือฟอนต์ปกติ
font-weight ตั้งความหนาแน่นของฟอนต์