แบบอักษรมาตรฐานสำหรับคำ กองแบบอักษรมาตรฐาน
ทางเลือก แบบอักษรมาตรฐานที่ใช้โดยระบบปฏิบัติการเฉพาะอาจปรับปรุงประสิทธิภาพ สิ่งนี้ใช้กับใด ๆ ปลอดภัยสำหรับอินเทอร์เน็ต» แบบอักษร ข้อดีของแบบอักษร “ระบบ” คือตรงกับแบบอักษรที่ระบบปฏิบัติการใช้อยู่แล้ว ดังนั้นผู้ใช้จะอ่านข้อความได้อย่างสะดวกสบาย
การจำแนกประเภทของแบบอักษรของระบบ:
ระบบปฏิบัติการ | เวอร์ชัน | แบบอักษรของระบบ |
แมค โอเอส เอ็กซ์ | เอล กาปิตัน | ซานฟรานซิสโก |
แมค โอเอส เอ็กซ์ | โยเซมิตี | เฮลเวติกา นอยเอ |
แมค โอเอส เอ็กซ์ | แมฟเวอริกส์ | ลูซิดา กรานเด |
หน้าต่าง | วิสตา | Segoe UI |
หน้าต่าง | ประสบการณ์ | ทาโฮมา |
หน้าต่าง | 3.1 ถึงฉัน | ไมโครซอฟต์แซนเซอริฟ |
หุ่นยนต์ | แซนด์วิชไอศกรีม (4.0)+ | โรโบโต |
หุ่นยนต์ | คัพเค้ก (1.5) ถึงรังผึ้ง (3.2.6) | ดรอยด์ แซนส์ |
อูบุนตู | ทุกรุ่น | อูบุนตู |
มาดูโค้ดกันดีกว่า
บทนำแสดงให้เห็นว่าด้วยการถือกำเนิดของระบบปฏิบัติการเวอร์ชันใหม่มีแบบอักษรใหม่และความจำเป็นในการอัปเดตด้วย แบบอักษรมาตรฐานสำหรับไซต์.
วิธีที่ 1: แบบอักษรของระบบในระดับองค์ประกอบ
Chrome และ Safari เพิ่งเปิดตัว " ระบบ-UI" เป็นตระกูลฟอนต์สากลที่สามารถใช้แทน " -apple-system" และ " กะพริบMacSystemFont- วิธีหนึ่งของการใช้แบบอักษรของระบบคือการเรียกแบบอักษรเหล่านั้นโดยตรงบนองค์ประกอบโดยใช้คุณสมบัติแบบอักษรตระกูล
GitHub ใช้วิธีนี้บนไซต์ของตนโดยใช้แบบอักษรของระบบในส่วนเนื้อหา:
/* แบบอักษรของระบบถูกใช้โดย GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "สัญลักษณ์ Segoe UI";
ผู้ดูแลระบบทั้ง Medium และ WordPress ใช้วิธีการที่คล้ายกัน รองรับมากที่สุดคือ Oxygen Sans ( สร้างขึ้นสำหรับระบบปฏิบัติการ GNU + Linux) และ Cantarell (สร้างขึ้นสำหรับระบบปฏิบัติการ GNOME)
ตัวอย่างนี้ยังแสดงให้เห็นถึงการรองรับอีโมติคอนและสัญลักษณ์บางประเภทอีกด้วย:
/* แบบอักษรของระบบที่ใช้โดย Medium และ WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )
หมายเหตุ: วิธีการนี้สามารถใช้ได้กับตระกูลฟอนต์เท่านั้น แบบอักษรมาตรฐาน CSSแทนที่จะเป็นแบบอักษรที่สั้นกว่า
วิธีที่ 2: สแต็คแบบอักษรของระบบ
ข้อจำกัดของวิธีแรกคือต้องเรียกสแต็กฟอนต์แบบเต็มทุกครั้งที่ใช้กับองค์ประกอบ และนี่อาจทำให้โค้ดขยายได้ ขึ้นอยู่กับว่าจะใช้ที่ไหนและอย่างไร
วิธีการอื่นในการประกาศแบบอักษรของระบบโดยใช้คุณสมบัติ @font-face ข้อดีคือ คุณสามารถประกาศฟอนต์ได้เพียงครั้งเดียว จากนั้นจึงนำไปใช้กับคุณสมบัติตระกูลฟอนต์แทนรายการฟอนต์ยาวๆ ในแต่ละครั้ง
แบบอักษรมาตรฐานบนไซต์คือแบบอักษรที่ติดตั้งตามค่าเริ่มต้นบนคอมพิวเตอร์ของผู้ใช้ที่กำลังดูไซต์ตามค่าเริ่มต้นเบราว์เซอร์ใดๆ จะไม่ดาวน์โหลดหรือติดตั้งแบบอักษรจากแหล่งข้อมูลของบุคคลที่สาม นี่คือสาเหตุว่าทำไมปัญหาเกี่ยวกับแบบอักษร "ที่ไม่ได้มาตรฐาน" จึงมักเกิดขึ้น สมมติว่าผู้ดูแลเว็บตัดสินใจสร้างแบบอักษรที่สวยงามบนไซต์ โดยระบุไว้ในโค้ด แต่ผู้ใช้ไซต์ส่วนใหญ่ไม่ได้ติดตั้งแบบอักษรนี้ในระบบปฏิบัติการของตน
แน่นอนว่าเบราว์เซอร์จะพยายามแทนที่แบบอักษรนี้ด้วยแบบอักษรที่ติดตั้งไว้ แต่ไซต์จะไม่แสดงเลยตามที่ตั้งใจไว้ในตอนแรก แน่นอนว่ามีเทคโนโลยีที่ช่วยให้คุณข้ามข้อ จำกัด นี้ได้ แต่จะดีกว่าหากทำเช่นนี้ในกรณีที่รุนแรงเมื่อคุณไม่สามารถทำได้หากไม่มีแบบอักษรของบุคคลที่สาม
แล้ว “ชุดมาตรฐาน” ของฟอนต์นี้คืออะไร? ด้านล่างนี้เป็นรายการแบบอักษรระบบปฏิบัติการที่ติดตั้งไว้ล่วงหน้า (แบบอักษรที่แนะนำให้ใช้บนเว็บไซต์จะถูกเน้นไว้):
ชื่อแบบอักษร | วินโดว์ 2000 | วินโดวส์เอ็กซ์พี | วิสตา | วินโดวส์ 7 | วิน 8 |
อาเรียล | + | + | + | + | + |
อาเรียล แบล็ค | + | + | + | + | + |
จองแอนติควา | + | ||||
คาลิบรี | + | + | + | ||
แคมเบรีย | + | + | + | ||
แคนดารา | + | + | + | ||
การ์ตูน Sans MS | + | + | + | + | + |
คอนโซล | + | + | + | ||
คอนสแตนเทีย | + | + | + | ||
บัว | + | + | + | ||
จัดส่ง | + | + | + | + | + |
เคอรี่ ใหม่ | + | + | + | + | + |
เอสทรานเจโล เอเดสซา | + | + | + | + | |
แฟรงคลินโกธิคกลาง | + | + | + | + | |
กัวเตมี | + | + | + | + | |
กาบริโอลา | + | + | |||
จอร์เจีย | + | + | + | + | + |
จอร์เจียอิตาลิกอิมแพ็ค | + | ||||
ผลกระทบ | + | + | + | + | + |
ลาธา | + | + | + | + | |
คอนโซลลูซิดา | + | + | + | + | + |
คอนโซล Lucida Sans | + | + | + | + | |
ลูซิดา แซนส์ ยูนิโค้ด | + | + | + | + | + |
มาร์เลตต์ | + | + | + | + | + |
ทันสมัย | + | + | |||
MS Sans Serif ที่ทันสมัย | + | ||||
MS ซานเซอริฟ | + | + | + | + | + |
เอ็มเอส เซริฟ | + | + | + | + | + |
เอ็มวี โบลี | + | + | + | + | |
นยาลา | + | + | + | ||
Palatino Linotype | + | + | + | + | + |
โรมัน | + | + | + | + | + |
สคริปต์ | + | + | + | + | + |
เซโกพิมพ์ | + | + | + | ||
สคริปต์ Segoe | + | + | + | ||
Segoe UI | + | + | + | ||
แบบอักษรขนาดเล็ก | + | + | |||
เครื่องหมาย | + | + | + | + | + |
ทาโฮมา | + | + | + | + | + |
Tempus Sans ไอทีซี | + | ||||
ไทม์ส นิวโรมัน | + | + | + | + | + |
เทรบูเช็ต เอ็มเอส | + | + | + | + | + |
ตุงกา | + | + | + | + | |
เวอร์ดานา | + | + | + | + | + |
สายรัด | + | + | + | + | + |
เวสต์มินสเตอร์ | + | ||||
วิงดิ้งส์ | + | + | + | + | + |
แบบอักษรมาตรฐานมีลักษณะอย่างไร
Windows Vista, Internet Explorer 7, เปิดใช้งาน ClearType (คลิกที่ภาพเพื่อดูขนาดเต็ม)Windows Vista, Firefox 2.0, เปิดใช้งาน ClearType (คลิกที่ภาพเพื่อดูขนาดเต็ม)
Mac OS X 10.4.8, Firefox 2.0, เปิดใช้งาน ClearType (คลิกที่ภาพเพื่อดูขนาดเต็ม)
Windows 2000, IE 6.0 (คลิกที่ภาพเพื่อดูขนาดเต็ม)
รายการนี้มีแบบอักษรทั่วไปสำหรับระบบปฏิบัติการ Windows ปัจจุบันทั้งหมด (อันที่จริงแล้วตั้งแต่ Windows 98) และแบบอักษรที่เทียบเท่าใน Mac OS แบบอักษรดังกล่าวบางครั้งเรียกว่า "แบบอักษรที่ปลอดภัยสำหรับเบราว์เซอร์" ( แบบอักษรที่ปลอดภัยของเบราว์เซอร์- นี่เป็นหนังสืออ้างอิงขนาดเล็กที่ฉันใช้เมื่อฉันสร้างเว็บเพจและฉันคิดว่ามันจะเป็นประโยชน์กับคุณเช่นกันหากคุณยังใหม่ต่อการออกแบบเว็บไซต์ คุณอาจกำลังคิดประมาณว่า “เหตุใดฉันจึงควรถูกจำกัดให้ใช้แบบอักษรชุดเล็กๆ เช่นนี้ด้วย ฉันมีคอลเลกชั่นแบบอักษรสวยๆ มากมาย!” ความจริงก็คือเบราว์เซอร์ของผู้เข้าชมสามารถแสดงเฉพาะแบบอักษรที่ติดตั้งเท่านั้น ในตัวเขาระบบปฏิบัติการ ( ประมาณ นักแปล:ปัจจุบัน คุณสามารถใช้แบบอักษรแทบทุกชนิดเมื่อออกแบบเพจโดยใช้ CSS 3 และคุณสมบัติใหม่ได้ @font-face- อย่างไรก็ตาม ไม่ใช่ทุกเบราว์เซอร์ที่สนับสนุนฟังก์ชันนี้) ซึ่งหมายความว่า ทั้งหมดผู้เยี่ยมชมเพจของคุณจะต้องเป็นเจ้าของแบบอักษรที่คุณเลือก ดังนั้น คุณควรใช้เฉพาะแบบอักษรที่มีอยู่ในแต่ละระบบปฏิบัติการเท่านั้น โชคดีที่ CSS มีคุณสมบัติ @ ครอบครัวแบบอักษรซึ่งทำให้งานนี้ง่ายขึ้น
รายการ
@ ความหมายตระกูลฟอนต์ | หน้าต่าง | แม็ค | ตระกูล |
---|---|---|---|
แอเรียล, เฮลเวติกา, แซนเซอริฟ | อาเรียล | อาเรียล, เฮลเวติกา | แซนเซอริฟ |
"Arial Black", แกดเจ็ต, แซนเซอริฟ | อาเรียล แบล็ค | แอเรียล แบล็ค, แก็ดเจ็ท | แซนเซอริฟ |
"Comic Sans MS" เล่นหาง | การ์ตูน Sans MS | การ์ตูน Sans MS 5 | เล่นหาง |
"Courier New", Courier, โมโนสเปซ | เคอรี่ ใหม่ | คูเรียร์ใหม่ คูเรียร์ 6 | พื้นที่เดียว |
จอร์เจีย, เซริฟ | จอร์เจีย 1 | จอร์เจีย | เซริฟ |
อิมแพ็ค, ชาร์โคล, แซนเซอริฟ | ผลกระทบ | ผลกระทบ 5, ถ่าน 6 | แซนเซอริฟ |
"Lucida Console", โมนาโก, โมโนสเปซ | คอนโซลลูซิดา | โมนาโก 5 | พื้นที่เดียว |
"Lucida Sans Unicode", "Lucida Grande", แซนเซอริฟ | ลูซิดา แซนส์ ยูนิโค้ด | ลูซิดา กรานเด | แซนเซอริฟ |
"Palatino Linotype", "Book Antiqua", Palatino, เซริฟ | Palatino Linotype หนังสือ Antiqua 3 | ปาลาติโน 6 | เซริฟ |
ทาโฮมา, เจนีวา, แซนเซอริฟ | ทาโฮมา | เจนีวา | แซนเซอริฟ |
"Times New Roman", Times, เซริฟ | ไทม์ส นิวโรมัน | ครั้ง | เซริฟ |
"Trebuchet MS", เฮลเวติกา, แซนเซอริฟ | เทรบูเช็ต เอ็มเอส 1 | เฮลเวติกา | แซนเซอริฟ |
เวอร์ดานา, เจนีวา, แซนเซอริฟ | เวอร์ดานา | เวอร์ดานา, เจนีวา | แซนเซอริฟ |
เครื่องหมาย | สัญลักษณ์ 2 | สัญลักษณ์ 2 | - |
สายรัด | สายรัด 2 | สายรัด 2 | - |
วิงดิงส์ "แซปฟ์ ดิงแบตส์" | วิงดิ้งส์ 2 | ซัปฟ์ ดิงแบตส์ 2 | - |
"MS Sans Serif", เจนีวา, sans-serif | MS ซานเซอริฟ 4 | เจนีวา | แซนเซอริฟ |
"MS Serif", "นิวยอร์ก", เซิฟ | เอ็มเอส เซอริฟ 4 | นิวยอร์ก 6 | เซริฟ |
1 ฟอนต์ Georgia และ Trebuchet MS มาพร้อมกับ Windows 2000/XP และรวมอยู่ในแพ็คเกจฟอนต์ IE (และมาพร้อมกับแอพพลิเคชั่น Microsoft มากมาย) ดังนั้นจึงได้รับการติดตั้งบนคอมพิวเตอร์ Windows 98 หลายเครื่อง
2 แบบอักษรสัญลักษณ์จะแสดงเฉพาะใน Internet Explorer เท่านั้น ในเบราว์เซอร์อื่น มักจะถูกแทนที่ด้วยแบบอักษรมาตรฐาน (แม้ว่า ตัวอย่างเช่น แบบอักษรสัญลักษณ์จะแสดงใน Opera และ Webdings ใน Safari)
3 แบบอักษร Book Antiqua เกือบจะเหมือนกับ Palatino Linotype; Palatino Linotype มาพร้อมกับ Windows 2000/XP และ Book Antiqua มาพร้อมกับ Windows 98
4 โปรดทราบว่าแบบอักษรเหล่านี้ไม่ใช่ TrueType แต่เป็นบิตแมป ดังนั้นบางขนาดจึงอาจดูไม่ดี (ได้รับการออกแบบมาให้แสดงที่ 8, 10, 12, 14, 18 และ 24 pt ที่ 96 DPI)
5 แบบอักษรเหล่านี้ใช้งานได้เฉพาะใน Safari ในรูปแบบมาตรฐาน แต่ใช้ไม่ได้กับตัวหนาหรือตัวเอียง Comic Sans MS ยังใช้งานได้เป็นตัวหนา แต่ไม่ใช่ตัวเอียง เบราว์เซอร์ Mac อื่นๆ ดูเหมือนจะเลียนแบบคุณสมบัติแบบอักษรที่ขาดหายไปได้ด้วยตัวเอง (ขอบคุณ Christian Fecteau สำหรับคำแนะนำ)
6 แบบอักษรเหล่านี้ได้รับการติดตั้งบน Mac ด้วยการติดตั้งแบบคลาสสิกเท่านั้น
ภาพหน้าจอ
- Mac OS X 10.4.8, Firefox 2.0, เปิดใช้งาน ClearType (ขอบคุณ Juris Vecvanags สำหรับภาพหน้าจอ)
- Mac OS X 10.4.4, Firefox 1.5, เปิดใช้งาน ClearType
- Mac OS X 10.4.11, Safari 3.0.4, เปิดใช้งาน ClearType (ขอบคุณ Nolan Gladius สำหรับภาพหน้าจอ)
- Mac OS X 10.4.4, Safari 2.0.3, เปิดใช้งาน ClearType (ขอบคุณ Eric Zavesky สำหรับภาพหน้าจอ)
- Windows Vista, Internet Explorer 7, เปิดใช้งาน ClearType
- Windows Vista, Firefox 2.0, เปิดใช้งาน ClearType (ขอบคุณ Michiel Bijl สำหรับภาพหน้าจอ)
แบบอักษรเป็นส่วนสำคัญและสำคัญมากในการออกแบบเว็บไซต์ โดยเน้นถึงความเป็นเอกเทศ บทความนี้จะพูดถึงการเชื่อมต่อแบบอักษรมาตรฐานกับหน้าเว็บซึ่งเรียกอีกอย่างว่าแบบอักษรของระบบ
ระบบ แบบอักษรมาตรฐาน ปลอดภัย
เบราว์เซอร์ใด ๆ จะแสดงเฉพาะแบบอักษรที่มีอยู่ในระบบปฏิบัติการของคอมพิวเตอร์ นั่นเป็นสาเหตุว่าทำไมจึงเรียกว่าระบบและติดตั้งตามค่าเริ่มต้นพร้อมกับระบบปฏิบัติการ
และเรียกว่าแบบอักษรที่ปลอดภัยเนื่องจากมีแนวโน้มที่จะแสดงในเบราว์เซอร์ของผู้เยี่ยมชมเว็บไซต์ส่วนใหญ่
แต่ปัญหาคือระบบปฏิบัติการที่ต่างกันมีชุดฟอนต์ติดตั้งต่างกัน คุณสามารถดูชุดแบบอักษรที่ให้มาพร้อมกับระบบปฏิบัติการได้จากหน้าอย่างเป็นทางการของ Windows และ Mac OS และใน Unix/Linux ก็ไม่มีการกำหนดมาตรฐานไว้เลย
เพื่อให้หน้าอินเทอร์เน็ตแสดงตามแนวคิดของนักออกแบบ จึงได้ติดตั้งคุณสมบัติแบบอักษรที่เรียกว่า Font-family ใน CSS
คุณสมบัติแบบอักษรตระกูล
คุณสมบัติตระกูลฟอนต์คือตระกูลฟอนต์ที่จัดกลุ่มตามลักษณะบางอย่าง
ครอบครัวทั่วไป:- serif - แบบอักษรที่มี serif ต่อท้าย
- sans-serif - แบบอักษร sans-serif;
- เล่นหาง - แบบอักษรตัวเอียง;
- แฟนตาซี - แบบอักษรตกแต่ง
- monospace - แบบอักษร monospace (พร้อมตัวอักษรที่มีความกว้างเท่ากัน)
ด้วยวิธีนี้ แบบอักษรที่คล้ายกันจากระบบปฏิบัติการที่แตกต่างกันจะถูกเลือกและเชื่อมต่อกับหน้าอินเทอร์เน็ตโดยคั่นด้วยเครื่องหมายจุลภาค
นี่คือตัวอย่าง สำหรับการรับรู้ทางสายตาเท่านั้น เราจะกลับมาที่ตัวอย่างนี้ในภายหลังเมื่อเราพิจารณาการเชื่อมต่อแบบอักษรโดยตรง
เพียงทำตามตรรกะแล้วทุกอย่างจะชัดเจน
เนื้อความ ( ตระกูลฟอนต์: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; ) มาวิเคราะห์สิ่งที่เขียนกัน:
- ระบบปฏิบัติการ Windows - Arial;
- OC Mac OS - เฮลเวติกา CY;
- OC Unix/Linux - เมฆฝน Sans L;
- ครอบครัวทั่วไป - sans-serif
ที่เรียกว่าแบบอักษรที่ปลอดภัย
ตามระบบปฏิบัติการ Windows รายการแบบอักษรที่ปลอดภัยหลายรายการได้รับการรวบรวม
- อาเรียล
- อาเรียล แบล็ค
- การ์ตูน Sans MS
- เคอรี่ ใหม่
- จอร์เจีย
- ผลกระทบ
- ไทม์ส นิวโรมัน
- เทรบูเช็ต เอ็มเอส
- เวอร์ดานา
ฟอนต์เหล่านี้ทั้งหมดได้รับการติดตั้งบน Mac OS X, Windows และผู้ใช้ Unix/Linux จำนวนมากที่ติดตั้งฟอนต์ Core สำหรับแพ็คเกจเว็บ
สำหรับผู้ใช้รายอื่น จะมีการจัดตารางการติดต่อไว้ ประกอบด้วยแบบอักษรที่คล้ายกันซึ่งเป็นของตระกูลใดตระกูลหนึ่ง
สารบัญและการเป็นเจ้าของฟอนต์สำหรับตระกูลเฉพาะ:
หน้าต่าง | แมคโอเอส | ยูนิกซ์/ลินุกซ์ | ครอบครัวบรรพบุรุษ |
---|---|---|---|
อาเรียล แบล็ค | เฮลเวติกา C.Y. | นิมบัส ซานส์ แอล | Sans-serif |
อาเรียล | เฮลเวติกา C.Y. | นิมบัส ซานส์ แอล | Sans-serif |
การ์ตูน Sans MS | โมนาโก ซีวาย | * (ดูด้านล่าง) | เล่นหาง |
เคอรี่ ใหม่ | * (ดูด้านล่าง) | นิมบัส โมโน แอล | โมโนสเปซ |
จอร์เจีย | * (ดูด้านล่าง) | หนังสือเรียนศตวรรษ L | เซริฟ |
ผลกระทบ | ชาร์โคล ซี.วาย. | * (ดูด้านล่าง) | Sans-serif |
ไทม์ส นิวโรมัน | ไทม์ส C.Y. | นิมบัส โรมัน No9 แอล | เซริฟ |
เทรบูเช็ต เอ็มเอส | เฮลเวติกา C.Y. | * (ดูด้านล่าง) | Sans-serif |
เวอร์ดานา | เจนีวา C.Y. | เดจาวู แซนส์ | Sans-serif |
* เมื่อเชื่อมต่อแบบอักษร คุณสามารถไว้วางใจได้อย่างปลอดภัย ตารางรองรับอักขระซีริลลิกและตัวอักษรรัสเซีย
การเชื่อมต่อแบบอักษรของระบบกับไซต์
หากคุณต้องการเชื่อมต่อ แบบอักษรหลักสำหรับทั้งเอกสารคุณเพียงแค่ต้องเพิ่มโค้ดต่อไปนี้ลงในสไตล์ชีต CSS:
เนื้อความ ( /* เชื่อมต่อแบบอักษรกับเอกสารทั้งหมด */ ตระกูลแบบอักษร: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* กำหนดขนาดตัวอักษรเพิ่มเติม */ ขนาดตัวอักษร: 16px; / * ตั้งค่าแบบอักษรตัวหนา หรือแทนที่จะเป็น 400 ให้ตั้งค่า - ปกติ */ font-weight: 400 )
และนี่คือวิธีการเชื่อมต่อแบบอักษรของระบบในกรอบงาน Bootstrap 4: แบบอักษรจะรวมอยู่ในอุปกรณ์เคลื่อนที่
เนื้อความ ( ตระกูลฟอนต์: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","สัญลักษณ์ Segoe UI"; )
การกำหนดแบบอักษรให้กับหัวเรื่อง
H1, H2, H3, H4, H5, H6 - ที่นี่เหมือนกัน มีเพียงเราเท่านั้นที่ตั้งค่าตัวหนาเพื่อเน้นส่วนหัว:
H1, h2, h3, h4, h5, h6 ( ตระกูลแบบอักษร: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* เชื่อมต่อแบบอักษรกับส่วนหัว */ น้ำหนักแบบอักษร: 600; / * กำหนดน้ำหนักแบบอักษร หรือตั้งค่าเป็นตัวหนาแทน 600 */ )
เรากำหนดแบบอักษรให้กับย่อหน้าเท่านั้น:
p ( ตระกูลฟอนต์: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: ปกติ; ขนาดฟอนต์: 16px; ) ทีละบรรทัด มีลักษณะดังนี้:- เราเชื่อมต่อแบบอักษรกับย่อหน้า ซึ่งสามารถนำไปใช้กับรายการ li บล็อก div แบบฟอร์ม และองค์ประกอบอื่น ๆ
- ตั้งค่าน้ำหนักแบบอักษร หรือตั้งค่าเป็นตัวหนาแทน 600
- นอกจากนี้ เรายังกำหนดขนาดตัวอักษรสำหรับย่อหน้าอีกด้วย
ถึง กำหนดแบบอักษรให้กับย่อหน้าเฉพาะเท่านั้นหรือบล็อก คุณต้องกำหนดคลาสให้กับบล็อกนี้ในเอกสาร HTML ก่อน:
นี่คือย่อหน้าที่มีแบบอักษรปลั๊กอิน
และในตาราง CSS ให้เขียนโค้ดต่อไปนี้:
แบบอักษรหลัก ( ตระกูลแบบอักษร: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; Font-weight: Normal; ขนาดตัวอักษร: 16px; )
ตอนนี้ แต่ละแท็ก - องค์ประกอบ html ที่มีคลาส .font (เรียกอะไรก็ได้ที่คุณต้องการ) จะได้รับการกำหนดแบบอักษร Arial โดยมีความหนาปกติ (400) และขนาด 16 พิกเซล
ในทำนองเดียวกัน คุณสามารถกำหนดแบบอักษรที่แตกต่างกันให้กับรายการ li ตาราง บล็อก div ทั้งหมด แต่ละคำ หรือวลีได้
การเชื่อมต่อแบบอักษรโดยตรงในเอกสาร HTML
แบบอักษรถูกรวมไว้ในเอกสาร HTML โดยตรงในลักษณะเดียวกับไฟล์ CSS ข้อแตกต่างเพียงอย่างเดียวคือในรูปแบบไวยากรณ์ คุณสามารถใส่แบบอักษรในส่วนหัวของเอกสาร - ระหว่างแท็กได้
(คล้ายกับไฟล์ CSS) หรือแบบอินไลน์ - การกำหนดคุณสมบัติให้กับแท็ก html โดยตรงรวมถึงแบบอักษรในส่วนหัวระหว่างแท็ก
- เมื่อต้องการทำเช่นนี้ เพิ่มรหัสต่อไปนี้ลงในเอกสาร html:
ทุกอย่างคล้ายกับการเชื่อมต่อในไฟล์ CSS
การเชื่อมต่อแบบอักษรแบบอินไลน์
ตรงไปยังองค์ประกอบของไซต์ ฉันขอยกตัวอย่างบางส่วนให้คุณ:
การเชื่อมต่อแบบอักษรกับย่อหน้า
นี่คือย่อหน้าพร้อมข้อความ
เราเน้นคำที่แยกต่างหากด้วยตัวหนาและกำหนดแบบอักษรแยกต่างหากจากคำหลักนี่คือย่อหน้าพร้อมข้อความและสิ่งนี้ คำซึ่งควรเน้นด้วยตัวหนา
เราเน้นลิงก์ด้วยตัวหนาและกำหนดแบบอักษรแยกต่างหากจากแบบอักษรหลักนี่เป็นข้อความธรรมดา ที่นี่ ลิงค์ก็เป็นข้อความธรรมดาเช่นกัน
ในทำนองเดียวกัน เรากำหนดแบบอักษรให้กับแท็ก html ใดๆ
หมายเหตุ - แบบอักษรของระบบใน Bootstrap 4
นักพัฒนา Framework Bootstrap 4 อันโด่งดังเชื่อมต่อฟอนต์ด้วยวิธีต่อไปนี้ เพื่อให้อุปกรณ์เกือบทุกชนิดสามารถใช้ฟอนต์ระบบมาตรฐานได้
เนื้อความ ( ตระกูลฟอนต์: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )