ฉันต้องการใช้แบบอักษรเดียวชื่อ "แอลจีเรีย" ทั่วทั้งเว็บไซต์ของฉัน ดังนั้นฉันต้องเปลี่ยนแท็ก HTML ทั้งหมดและฉันไม่ต้องการเขียนโค้ดที่แตกต่างกันสำหรับแท็กต่างๆเช่น:
button{font-family:Algerian;}
div{font-family:Algerian;}
วิธีการที่เขียนด้านล่างนี้เป็นสิ่งที่ไม่ควรทำ:
div,button,span,strong{font-family:Algerian;}
คำตอบ:
ใส่font-familyคำประกาศลงในbodyตัวเลือก:
body {
font-family: Algerian;
}
องค์ประกอบทั้งหมดในเพจของคุณจะสืบทอดตระกูลฟอนต์นี้ (เว้นแต่คุณจะลบล้างในภายหลัง)
font-familyมาจากพาเรนต์ก็ต่อเมื่อไม่มีสไตล์ชีตตั้งค่าตระกูลฟอนต์สำหรับองค์ประกอบ แผ่นสไตล์เบราว์เซอร์มักจะตั้งตระกูลแบบอักษรอย่างน้อยสำหรับinput, textarea, code, ttและpreองค์ประกอบ
*{font-family:Algerian;}
ทางออกที่ดีกว่าด้านล่าง การใช้แบบอักษรเดียวกับทั้งเว็บไซต์ด้วย CSS
ตัวเลือกสากล*หมายถึงองค์ประกอบทั้งหมด css นี้จะทำเพื่อคุณ:
*{
font-family:Algerian;
}
แต่น่าเสียดายหากคุณใช้ไอคอนFontAwesomeหรือไอคอนใด ๆ ที่ต้องใช้ตระกูลฟอนต์ของตัวเองสิ่งนี้จะทำลายไอคอนและจะไม่แสดงมุมมองที่ต้องการ
เพื่อหลีกเลี่ยงปัญหานี้คุณสามารถใช้:notตัวเลือกได้ตัวอย่างของไอคอน fontawesome คือ<i class="fa fa-bluetooth"></i>คุณสามารถใช้:
*:not(i){
font-family:Algerian;
}
สิ่งนี้จะนำตระกูลนี้ไปใช้กับองค์ประกอบทั้งหมดในเอกสารยกเว้นองค์ประกอบที่มีชื่อแท็ก<i>คุณยังสามารถทำได้สำหรับคลาส:
*:not(.fa){
font-family:Algerian;
}
สิ่งนี้จะนำตระกูลนี้ไปใช้กับองค์ประกอบทั้งหมดในเอกสารยกเว้นองค์ประกอบที่มีคลาส "fa" ซึ่งหมายถึงคลาสเริ่มต้นของ fontawesome คุณยังสามารถกำหนดเป้าหมายมากกว่าหนึ่งคลาสเช่นนี้:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
ตรวจสอบให้แน่ใจว่าอุปกรณ์เคลื่อนที่จะไม่เปลี่ยนแบบอักษรด้วยแบบอักษรเริ่มต้นโดยใช้สิ่งสำคัญร่วมกับตัวเลือกสากล *:
* { font-family: Algerian !important;}
* { font-family: Algerian; }
ตัวเลือกสากล*หมายถึงองค์ประกอบใด ๆ
เนื่องจากแบบอักษรอื่นมักจะถูกกำหนดโดยเบราว์เซอร์สำหรับองค์ประกอบแบบฟอร์มอยู่แล้ว 2 วิธีในการใช้แบบอักษรนี้ทุกที่:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
จะยังคงมีแบบอักษร monospace ในองค์ประกอบต่างๆเช่น pre / code, kbd เป็นต้น แต่ในกรณีที่คุณใช้องค์ประกอบเหล่านี้คุณควรใช้แบบอักษร monospace ที่นั่น
หมายเหตุสำคัญ: หากมีคนเพียงไม่กี่คนที่ติดตั้งแบบอักษรนี้บนระบบปฏิบัติการของตนระบบจะใช้แบบอักษรที่สองในรายการ ที่นี่คุณไม่ได้กำหนดแบบอักษรที่สองดังนั้นจึงจะใช้แบบอักษร serif เริ่มต้นและจะเป็น Times, Times New Roman ยกเว้นใน Linux
มีสองตัวเลือก: ใช้ @ font-face หากแบบอักษรของคุณไม่มีการใช้งานเป็นแบบอักษรที่ดาวน์โหลดได้หรือเพิ่มทางเลือก: วินาทีที่สามและอื่น ๆ และสุดท้ายคือตระกูลเริ่มต้น (sans-serif, เล่นหาง (*), monospace หรือ serif) รายการแรกที่มีอยู่ใน OS ของผู้ใช้จะถูกใช้
(*) เริ่มต้นเล่นหางบน Windows คือ Comic Sans ยกเว้นถ้าคุณต้องการหมุนรอบผู้ใช้ Windows อย่าทำอย่างนั้น :) ฟอนต์นี้แย่มากยกเว้นวันเกิดลูก ๆ ของคุณที่ยินดีต้อนรับ
โปรดวางสิ่งนี้ไว้ที่ส่วนหัวของเพจของคุณหาก "body" จำเป็นต้องใช้ 1 และแบบอักษรเดียวกัน:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
ทุกอย่างระหว่างแท็ก<body>และ</body>จะมีแบบอักษรเดียวกัน
โอเคฉันประสบปัญหานี้ซึ่งฉันได้ลองใช้ตัวเลือกต่างๆมากมาย
ฟอนต์ที่ฉันใช้คือ Ubuntu-LI ฉันสร้างโฟลเดอร์ฟอนต์ในไดเร็กทอรีการทำงานของฉัน ภายใต้แบบอักษรของโฟลเดอร์
ฉันสามารถนำไปใช้ได้ ... ในที่สุดนี่คือรหัสการทำงานของฉัน
ฉันต้องการให้สิ่งนี้นำไปใช้กับเว็บไซต์ทั้งหมดของฉันดังนั้นฉันจึงวางไว้ที่ด้านบนของเอกสาร css เหนือแท็ก Div ทั้งหมด (ไม่ใช่ว่าจะสำคัญเพียงแค่รู้ว่าฟอนต์ใด ๆ ที่คุณกำหนดโพสต์สคริปต์ของคุณจะมีความสำคัญมากกว่า)
@font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
ถ้าฉันต้องการให้แท็ก H1 ทั้งหมดของฉันเป็นอย่างอื่นสมมติว่า sans sarif ฉันจะทำสิ่งที่ชอบ
h1{
font-family: Sans-sarif;
}
จากกรณีนี้มีเพียงแท็ก H1 ของฉันเท่านั้นที่จะเป็นแบบอักษร sans-sarif และส่วนที่เหลือของหน้าของฉันจะเป็นแบบอักษร Ubuntu-LI
ใน Bootstrap ผู้ตรวจสอบเว็บกล่าวว่าส่วนหัวถูกตั้งค่าเป็น "สืบทอด"
ทั้งหมดที่ฉันต้องการเพื่อตั้งค่าหน้าของฉันเป็นแบบอักษรใหม่คือ
div, p {font-family: Algerian}
ที่อยู่ใน. scss
*{font-family:Algerian;}
html นี้ใช้ได้กับฉัน เพิ่มไปยังการตั้งค่า canvas ใน wordpress
ดูดี - ขอบคุณ!