modern font stacks
1.0.0
แบบอักษรที่เร็วที่สุด ไม่มีการดาวน์โหลดไม่มีเลย์เอาต์กะไม่มีกะพริบ - เพียงแค่แสดงผลทันที
ระบบ UI ·การเปลี่ยนผ่าน·รูปแบบเก่า·มนุษยนิยม·มนุษย์เรขาคณิต
นักมนุษยนิยมคลาสสิก· Neo-Grotesque · Monospace Slab Serif · Monospace Code
อุตสาหกรรม· sans โค้งมน· slab serif ·โบราณ· didone ·เขียนด้วยลายมือ
คุณสมบัติเพิ่มเติม / ระบบปฏิบัติการสนับสนุน / ปลั๊กอินและส่วนขยาย
แบบอักษร UI System เป็นแบบดั้งเดิมของอินเทอร์เฟซระบบปฏิบัติการ พวกเขามีความชัดเจนและอ่านง่ายในขนาดเล็กมีน้ำหนักตัวอักษรมากมายและเหมาะสำหรับองค์ประกอบ UI
font-family : system-ui , sans-serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| ซานฟรานซิสโก | |||||||||
| segoe ui | |||||||||
| หุ่นยนต์ | |||||||||
| Ubuntu | |||||||||
| cantarell | |||||||||
| noto sans |
system-ui ซึ่งเป็นตัวแทนของแบบอักษรส่วนต่อประสานผู้ใช้เริ่มต้น ได้รับการสนับสนุนอย่างกว้างขวางในระบบปฏิบัติการที่ทันสมัยทั้งหมดกลับไปด้านบน↑
รูปแบบการเปลี่ยนผ่านเป็นการผสมผสานระหว่างรูปแบบเก่าและรูปแบบที่ทันสมัยที่ได้รับการพัฒนาในระหว่างการตรัสรู้ หนึ่งในตัวอย่างที่มีชื่อเสียงที่สุดของแบบอักษรในช่วงเปลี่ยนผ่านคือ Times New Roman ซึ่งได้รับการพัฒนาสำหรับหนังสือพิมพ์ The Times of London
font-family : Charter , 'Bitstream Charter' , 'Sitka Text' , Cambria , serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| กฎบัตร | |||||||||
| กฎบัตรบิตสตรีม | |||||||||
| ข้อความ sitka | |||||||||
| เคมเบรีย | |||||||||
| noto serif¹ |
) ข้อผิดพลาดนี้ได้รับการรายงานไปยัง Appleserif เริ่มต้นดังนั้นจึงไม่จำเป็นต้องระบุในสแต็กกลับไปด้านบน↑
แบบอักษรสไตล์เก่ามีลักษณะเป็นความเครียดในแนวทแยงความคมชัดต่ำระหว่างจังหวะหนาและบางและ serifs โค้งมนและได้รับการพัฒนาในยุคฟื้นฟูศิลปวิทยา หนึ่งในตัวอย่างที่โด่งดังที่สุดของแบบอักษรสไตล์เก่าคือ Garamond
font-family : 'Iowan Old Style' , 'Palatino Linotype' , 'URW Palladio L' , P052 , serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| สไตล์ไอโอกันเก่า | |||||||||
| Palatino linotype | |||||||||
| urw palladio l | |||||||||
| P052 | |||||||||
| noto serif¹ |
serif เริ่มต้นดังนั้นจึงไม่จำเป็นต้องระบุในสแต็กกลับไปด้านบน↑
รูปแบบของมนุษยนิยมมีลักษณะเป็นรูปแบบอินทรีย์การเขียนตัวอักษรและความคมชัดต่ำระหว่างจังหวะหนาและบาง แบบอักษรเหล่านี้ได้รับแรงบันดาลใจจากการเขียนด้วยลายมือของยุคฟื้นฟูศิลปวิทยาการและมักจะถือว่าเป็นอ่านง่ายและง่ายกว่าการอ่านมากกว่าแบบอักษร sans-serif อื่น ๆ
font-family : Seravek , 'Gill Sans Nova' , Ubuntu , Calibri , 'DejaVu Sans' , source-sans-pro , sans-serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| seravek | |||||||||
| Gill Sans Nova | |||||||||
| Ubuntu | |||||||||
| คาลิบรี | |||||||||
| Dejavu Sans | |||||||||
| แหล่งที่มา sans pro |
กลับไปด้านบน↑
รูปแบบรูปแบบมนุษย์ทางเรขาคณิตมีลักษณะที่สะอาดรูปแบบทางเรขาคณิตและความกว้างของจังหวะที่สม่ำเสมอ แบบอักษรเหล่านี้มักจะถูกพิจารณาว่าทันสมัยและเพรียวบางในรูปลักษณ์และมักจะใช้สำหรับพาดหัวและวัตถุประสงค์การแสดงอื่น ๆ Futura เป็นตัวอย่างที่มีชื่อเสียงของการจำแนกประเภทนี้
font-family : Avenir , Montserrat , Corbel , 'URW Gothic' , source-sans-pro , sans-serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| อเวนิร์ | |||||||||
| มอนต์เซอร์รัต | |||||||||
| บัว | |||||||||
| Urw Gothic | |||||||||
| แหล่งที่มา sans pro |
กลับไปด้านบน↑
รูปแบบของนักมนุษยนิยมคลาสสิกมีลักษณะเฉพาะว่าจังหวะที่กว้างขึ้นอย่างละเอียดเมื่อพวกเขาไปถึงเทอร์มินัลจังหวะโดยไม่สิ้นสุดใน serif แบบอักษรเหล่านี้ได้รับแรงบันดาลใจจากเมืองหลวงโรมันคลาสสิกและการแกะสลักหินบนหลุมฝังศพยุคฟื้นฟูศิลปวิทยา
font-family : Optima , Candara , 'Noto Sans' , source-sans-pro , sans-serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| Optima | |||||||||
| แคนาดา | |||||||||
| noto sans | |||||||||
| แหล่งที่มา sans pro |
กลับไปด้านบน↑
รูปแบบแบบนีโอ-กรอตส์เป็นรูปแบบของ sans-serif ที่ได้รับการพัฒนาในช่วงปลายศตวรรษที่ 19 และต้นศตวรรษที่ 20 และโดดเด่นด้วยรูปแบบที่สะอาดเรขาคณิตและความกว้างของจังหวะที่สม่ำเสมอ หนึ่งในตัวอย่างที่โด่งดังที่สุดของแบบอักษรนีโอ-grotesque คือ helvetica
font-family : Inter , Roboto , 'Helvetica Neue' , 'Arial Nova' , 'Nimbus Sans' , Arial , sans-serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| ระหว่างกัน | |||||||||
| หุ่นยนต์ | |||||||||
| Helvetica neue | |||||||||
| Arial Nova | |||||||||
| ซันสบัส | |||||||||
| arial |
กลับไปด้านบน↑
Monospace Slab serif typefaces มีลักษณะเป็นตัวอักษรความกว้างคงที่ซึ่งมีความกว้างเท่ากันโดยไม่คำนึงถึงรูปร่างของพวกเขาและรูปแบบที่เรียบง่ายทางเรขาคณิต ใช้เพื่อเลียนแบบเอาต์พุตเครื่องพิมพ์ดีดสำหรับรายงานงานตารางและเอกสารทางเทคนิค
font-family : 'Nimbus Mono PS' , 'Courier New' , monospace;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| Nimbus Mono PS | |||||||||
| Courier ใหม่ | |||||||||
| โมโนที่น่ารัก |
กลับไปด้านบน↑
Monospace Code Typefaces ได้รับการออกแบบมาโดยเฉพาะสำหรับใช้ในการเขียนโปรแกรมและแอพพลิเคชั่นทางเทคนิคอื่น ๆ แบบอักษรเหล่านี้มีลักษณะเฉพาะด้วยการออกแบบที่ monospaced ซึ่งหมายความว่าตัวอักษรและตัวละครทั้งหมดมีความกว้างเท่ากันและรูปแบบที่ชัดเจนและชัดเจนของพวกเขา
font-family : ui-monospace , 'Cascadia Code' , 'Source Code Pro' , Menlo , Consolas , 'DejaVu Sans Mono' , monospace;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| SF โมโน | |||||||||
| รหัสแคสคาเดีย | |||||||||
| ซอร์สโค้ดโปรโปร | |||||||||
| เมนโล | |||||||||
| consolas | |||||||||
| dejavu sans mono | |||||||||
| Droid Sans Mono |
ui-monospace บน MacOS 10.15+ และ iOS 13.3+ ในขณะที่ใช้ Safarimonospace เป็นชื่อนามแฝงสำหรับมันกลับไปด้านบน↑
แบบอักษรอุตสาหกรรมมีต้นกำเนิดในช่วงปลายศตวรรษที่ 19 และได้รับอิทธิพลอย่างมากจากความก้าวหน้าทางเทคโนโลยีและอุตสาหกรรมในช่วงเวลานั้น แบบอักษรอุตสาหกรรมมีลักษณะเป็นตัวหนาของตัวอักษร sans-serif รูปลักษณ์ที่เรียบง่ายและตรงไปตรงมาและการใช้เส้นตรงและรูปทรงเรขาคณิต
font-family : Bahnschrift , 'DIN Alternate' , 'Franklin Gothic Medium' , 'Nimbus Sans Narrow' , sans-serif-condensed , sans-serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| Bahnschrift | |||||||||
| DIN STERCONATE | |||||||||
| Franklin Gothic Medium | |||||||||
| Nimbus Sans แคบ | |||||||||
| Roboto ควบแน่น |
กลับไปด้านบน↑
รูปแบบแบบโค้งมนนั้นโดดเด่นด้วยรูปแบบตัวอักษรโค้งมนและให้รูปลักษณ์ที่นุ่มนวลและเป็นมิตร ขอบโค้งมนให้ความรู้สึกแบบอินทรีย์และขี้เล่นมากขึ้นทำให้เหมาะสำหรับใช้ในการออกแบบที่ไม่เป็นทางการหรือเป็นมิตรกับเด็ก สไตล์ Sans-Serif ที่โค้งมนได้รับความนิยมมาตั้งแต่ปี 1950 และยังคงใช้กันอย่างแพร่หลายในการโฆษณาการสร้างแบรนด์และการออกแบบกราฟิกในรูปแบบอื่น ๆ
font-family : ui-rounded , 'Hiragino Maru Gothic ProN' , Quicksand , Comfortaa , Manjari , 'Arial Rounded MT' , 'Arial Rounded MT Bold' , Calibri , source-sans-pro , sans-serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| SF Pro Rounded | |||||||||
| Hiragino Maru Gothic | |||||||||
| ทรายดูด | |||||||||
| ความสะดวกสบาย | |||||||||
| Manjari | |||||||||
| Arial Rounded Mt | |||||||||
| Arial Rounded Mt Bold | |||||||||
| คาลิบรี | |||||||||
| แหล่งที่มา sans pro |
ui-rounded บน MacOS 10.15+ และ iOS 13.3+ ในขณะที่ใช้ Safariกลับไปด้านบน↑
Slab Serif typefaces มีลักษณะโดยการปรากฏตัวของ serifs ที่มีความหนาเหมือนบล็อกที่ปลายของรูปแบบตัวอักษรแต่ละตัว serifs เหล่านี้มักจะไม่ได้รับการรับรองซึ่งหมายความว่าพวกเขาไม่มีการเปลี่ยนโค้งหรือเรียวเป็นจังหวะหลักของจดหมาย
font-family : Rockwell , 'Rockwell Nova' , 'Roboto Slab' , 'DejaVu Serif' , 'Sitka Small' , serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| หิน | |||||||||
| Rockwell Nova | |||||||||
| แผ่นหุ่นยนต์ | |||||||||
| dejavu serif | |||||||||
| Sitka เล็ก | |||||||||
| noto serif |
serif เริ่มต้นดังนั้นจึงไม่จำเป็นต้องระบุในสแต็กกลับไปด้านบน↑
แบบอักษรโบราณหรือที่รู้จักกันในชื่อชาวอียิปต์เป็นชุดย่อยของแบบอักษร Serif ที่ได้รับความนิยมในศตวรรษที่ 19 พวกเขาโดดเด่นด้วย serifs เหมือนบล็อกและน้ำหนักตัวหนาสม่ำเสมอ
font-family : Superclarendon , 'Bookman Old Style' , 'URW Bookman' , 'URW Bookman L' , 'Georgia Pro' , Georgia , serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| Superclarendon | |||||||||
| บุ๊คแมนสไตล์เก่า | |||||||||
| Urw Bookman | |||||||||
| Georgia Pro | |||||||||
| รัฐจอร์เจีย | |||||||||
| noto serif¹ |
Georgia ดังนั้นไม่จำเป็นต้องระบุในสแต็กกลับไปด้านบน↑
Didone typefaces หรือที่รู้จักกันในชื่อ typefaces ที่ทันสมัยมีความแตกต่างสูงระหว่างจังหวะหนาและบาง ๆ ความเครียดแนวตั้งและ serifs เส้นผมที่ไม่มีการครุ่นคิด สไตล์ Didone เกิดขึ้นในช่วงปลายศตวรรษที่ 18 และได้รับความนิยมในช่วงศตวรรษที่ 19
font-family : Didot , 'Bodoni MT' , 'Noto Serif Display' , 'URW Palladio L' , P052 , Sylfaen , serif;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| DiDot | |||||||||
| Bodoni MT | |||||||||
| Noto Serif Display | |||||||||
| urw palladio l | |||||||||
| P052 | |||||||||
| Sylfaen | |||||||||
| noto serif¹ |
serif เริ่มต้นดังนั้นจึงไม่จำเป็นต้องระบุในสแต็กกลับไปด้านบน↑
แบบอักษรที่เขียนด้วยลายมือได้รับการออกแบบมาเพื่อเลียนแบบรูปลักษณ์และความรู้สึกของการเขียนด้วยลายมือ แม้จะมีสไตล์การเขียนด้วยลายมือมากมาย แต่สแต็กแบบอักษรนี้มีแนวโน้มที่จะนำลายมือที่ไม่เป็นทางการและไม่เป็นทางการมากขึ้นทุกวัน
font-family : 'Segoe Print' , 'Bradley Hand' , Chilanka , TSCu_Comic , casual , cursive;
ดูในเบราว์เซอร์ของคุณ (ดูบทความ / อักขระ)
| น้ำหนักตัวอักษร | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| Segoe Print | |||||||||
| มือแบรดลีย์ | |||||||||
| chilanka | |||||||||
| tscu_comic | |||||||||
| เร็วๆ นี้ |
กลับไปด้านบน↑
กำลังมองหาการเพิ่มอีโมจิดั้งเดิมลงในหน้าของคุณหรือไม่? ผนวกแบบอักษรเหล่านี้ในตอนท้ายของสแต็คแบบอักษร:
'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji' แสดงข้อความของคุณด้วยการต่อต้านนามแฝงโดยใช้คุณสมบัติ CSS เหล่านี้:
html {
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
}กลับไปด้านบน↑
กลับไปด้านบน↑
