วิธีการใช้แบบอักษรทั่วโลกกับเอกสาร HTML ทั้งหมด

175

ฉันมีหน้า HTML ซึ่งมีข้อความและการจัดรูปแบบบางอย่าง ฉันต้องการทำให้เป็นแบบอักษรตระกูลเดียวกันและมีขนาดตัวอักษรเดียวกันโดยไม่คำนึงถึงการจัดรูปแบบข้อความภายในทั้งหมด

ฉันต้องการตั้งค่ารูปแบบอักษรสากลสำหรับหน้า HTML

ฉันจะบรรลุสิ่งนี้ได้อย่างไร

html css font-family

— ลูกกวาด
แหล่งที่มา

263

คุณควรใช้เครื่องหมายดอกจันและ!importantองค์ประกอบภายใน CSS

html *
{
   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;
}

เครื่องหมายดอกจันตรงกับทุกสิ่ง (คุณอาจหนีไปได้โดยไม่ต้องทำhtmlมากเกินไป)

การ!importantทำให้แน่ใจว่าไม่มีสิ่งใดสามารถแทนที่สิ่งที่คุณตั้งไว้ในรูปแบบนี้ (เว้นแต่เป็นสิ่งสำคัญเช่นกัน) (นี่คือการช่วยเหลือตามความต้องการของคุณว่าควร "ละเว้นการจัดรูปแบบข้อความภายใน" - ซึ่งฉันใช้เพื่อหมายความว่าสไตล์อื่นไม่สามารถเขียนทับสิ่งเหล่านี้ได้)

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

— Amadiere
แหล่งที่มา

24

+1 !importantมีประโยชน์ แต่สามารถรับ "ธาร์เป็นสัตว์ประหลาด" ได้เล็กน้อยหากมีการใช้มากเกินไป

— StuperUser

2

+1 !importantสำหรับการให้การใช้งานที่ดีของ จะต้องใช้เป็นตัวเลือกสุดท้ายเสมอ

— dShringi

3

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

— เซท

1

การใช้html * {}หรือbody * {}จะช่วยให้คุณหลีกเลี่ยงการแทนที่body p {}ในสไตล์ชีตที่รวมไว้ body p {}มีความเฉพาะเจาะจงมากกว่าbody {}ดังนั้นเครื่องหมายดอกจันจึงเป็นองค์ประกอบสำคัญที่นี่

— YoYo

1

ฉันคิดว่าคุณสามารถละเว้นได้htmlจากhtml *ที่นี่

— JonnyRaa

44

วิธีปฏิบัติที่ดีที่สุดฉันคิดว่าการตั้งค่าแบบอักษรให้กับร่างกาย:

body {
    font: normal 10px Verdana, Arial, sans-serif;
}

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

h2, h3 {
    font-size: 14px;
}

— Teneff
แหล่งที่มา

หากคุณใช้เฟรมเวิร์กเช่นรากฐาน css สิ่งนี้จะไม่ทำงานหากไม่มีการเพิ่ม!

— Petros Kyriakou

16

ตั้งไว้ในตัวเลือกของ CSS ของคุณ เช่น

body {
    font: 16px Arial, sans-serif;
}

— Petecoop
แหล่งที่มา

1

สิ่งนี้สามารถแทนที่ได้ด้วยตัวเลือกที่เฉพาะเจาะจงมากขึ้น

— StuperUser

2

มันจะไม่นำไปใช้กับองค์ประกอบทั้งหมดตัวอย่างเช่น input type = 'button'

— RRTW

12

ใช้ CSS ต่อไปนี้:

* {
    font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */
}

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

โปรดทราบว่า!important- แฟล็กจะแสดงfontสไตล์สำหรับ*ให้เป็นสัมบูรณ์แม้ว่าตัวเลือกอื่น ๆ จะถูกใช้เพื่อตั้งค่าข้อความ (ตัวอย่างเช่นbodyหรืออาจจะ a p)

— karllindmark
แหล่งที่มา

1

อาจ!importantจะป้องกันไม่ให้ตัวเลือกอื่นเอาชนะการตั้งค่า

— Quasdunk

1

ใช่แล้ว!importantจะป้องกันไม่ให้ตัวเลือกอื่นเอาชนะได้ตราบใดที่มันยังไม่ได้ใช้ หึ ฉันจะแก้ไขโพสต์และเพิ่ม - ขอบคุณ :-)

— karllindmark

ใช่ถูกต้องแล้ว ไม่ค่อยแน่ใจนัก แต่ฉันคิดว่าความชอบนั้นขึ้นอยู่กับว่าคุณจะประกาศอย่างไร หากคุณวางไว้ที่ด้านล่างสุดฉันอาจแทนที่!importants จากตัวเลือกที่เฉพาะเจาะจงด้านบน แต่นั่นไม่ได้ค่อนข้างจุดที่นี่ผมคิดว่า :)

— Quasdunk

นี่เป็นคำตอบเดียวที่ใช้งานได้จริงสำหรับฉัน ไม่แน่ใจว่าทำไม แต่มันทำ

— ปีเตอร์กอร์ดอน

5

* + !importantคุณไม่ควรใช้ ถ้าคุณต้องการเปลี่ยนแบบอักษรในบางส่วนของเอกสาร HTML ของคุณ คุณควรใช้ร่างกายโดยไม่สำคัญ ใช้!importantเฉพาะในกรณีที่ไม่มีตัวเลือกอื่น

— Rakowu
แหล่งที่มา

1

ลองสิ่งนี้:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}

— anglimasS
แหล่งที่มา

สวัสดี anglimass ฉันจัดรูปแบบรหัสของคุณถ้าคุณใช้ช่องว่าง 4 หรือ{}ปุ่มคุณสามารถแสดงตัวอย่างรหัสด้วยวิธีนี้ในคำตอบของคุณ

— StuperUser