กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

CSS Great Font Pairings


การจับคู่แบบอักษรที่ยอดเยี่ยมมีความสำคัญต่อการออกแบบที่ยอดเยี่ยม


กฎการจับคู่แบบอักษร

กฎพื้นฐานบางประการในการสร้างการจับคู่แบบอักษรที่ยอดเยี่ยมมีดังนี้

1. เสริม

การค้นหาการจับคู่แบบอักษรที่เสริมกันและกันนั้นปลอดภัยเสมอ

การผสมผสานแบบอักษรที่ยอดเยี่ยมควรกลมกลืนกัน โดยไม่เหมือนหรือต่างกันมากเกินไป

2. ใช้แบบอักษร Superfamilies

ฟอนต์ superfamily คือชุดของฟอนต์ที่ออกแบบมาให้ทำงานร่วมกันได้ดี ดังนั้น การใช้แบบอักษรที่แตกต่างกันภายใน superfamily เดียวกันจึงปลอดภัย

ตัวอย่างเช่น ซูเปอร์แฟมิลี่ Lucida มีแบบอักษรต่อไปนี้: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, เครื่องพิมพ์ดีด Lucida Serif และ Lucida Math

3. คอนทราสต์คือราชา

แบบอักษรสองแบบที่เหมือนกันเกินไปมักจะขัดแย้งกัน อย่างไรก็ตาม การตัดกันอย่างถูกวิธี จะดึงเอาสิ่งที่ดีที่สุดในแต่ละฟอนต์ออกมา

ตัวอย่าง: การรวม serif กับ sans serif เป็นการรวมกันที่รู้จักกันดี

superfamily ที่แข็งแกร่งมีทั้งรูปแบบ serif และ sans serif ของแบบอักษรเดียวกัน (เช่น Lucida และ Lucida Sans)

4. เลือกเพียงหนึ่งบอส

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

ตัวอย่าง

ไม่ต้องสงสัยเลย "จอร์เจีย" เป็นเจ้านายที่นี่:

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

ด้านล่างนี้ เราได้แสดงการจับคู่แบบอักษรยอดนิยมบางตัวที่เหมาะกับแบรนด์และบริบทต่างๆ



จอร์เจียและเวอร์ดานา

Georgia และ Verdana เป็นการผสมผสานที่คลาสสิก นอกจากนี้ยังยึดติดกับมาตรฐานแบบอักษรที่ปลอดภัยสำหรับเว็บ:

ตัวอย่าง

ใช้แบบอักษร "จอร์เจีย" สำหรับส่วนหัวและ "Verdana" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Helvetica และ Garamond

Helvetica และ Garamond เป็นอีกหนึ่งชุดค่าผสมแบบคลาสสิกที่ใช้แบบอักษรที่ปลอดภัยสำหรับเว็บ:

ตัวอย่าง

ใช้แบบอักษร "Helvetica" สำหรับส่วนหัวและ "Garamond" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


การจับคู่แบบอักษร Google ยอดนิยม

หากคุณไม่ต้องการใช้แบบอักษรมาตรฐานใน HTML คุณสามารถใช้ Google Fonts

Google Fonts ใช้งานได้ฟรี และมีแบบอักษรให้เลือกมากกว่า 1,000 แบบ

ด้านล่างนี้คือการจับคู่แบบอักษรเว็บ Google ยอดนิยมบางส่วน


Merriweather และ Open Sans

ตัวอย่าง

ใช้แบบอักษร "Merriweather" สำหรับส่วนหัวและ "Open Sans" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


อูบุนตูและลอร่า

ตัวอย่าง

ใช้แบบอักษร "Ubuntu" สำหรับส่วนหัวและ "Lora" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Abril Fatface และ Poppins

ตัวอย่าง

ใช้แบบอักษร "Abril Fatface" สำหรับส่วนหัวและ "Poppins" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Cinzel และ Fauna One

ตัวอย่าง

ใช้แบบอักษร "Cinzel" สำหรับส่วนหัวและ "Fauna One" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Mountain One และ Libre Baskerville

ตัวอย่าง

ใช้แบบอักษร "Fjalla One" สำหรับส่วนหัวและ "Libre Baskerville" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Space Mono และ Muli

ตัวอย่าง

ใช้แบบอักษร "Space Mono" สำหรับส่วนหัวและ "Muli" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


สเปกตรัมและรูบิก

ตัวอย่าง

ใช้แบบอักษร "Spectral" สำหรับส่วนหัวและ "Rubik" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Oswald และ Noto Sans

ตัวอย่าง

ใช้แบบอักษร "Oswald" สำหรับส่วนหัวและ "Noto Sans" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.

สำหรับรายการ Google Fonts ฟรีทั้งหมด โปรดไปที่How To - บทช่วยสอน Google Fonts