css設置字體粗細主要通過font-weight屬性實現，使用數字值（100-900）可精確控制粗細，如300為細體、700為粗體；除normal（400）和bold（700）外，還支持lighter（更細）和bolder（更粗）關鍵字；設置不生效常見原因包括字體不支持、樣式被覆蓋、繼承問題或瀏覽器緩存，排查方法有檢查開發者工具中的樣式、調整優先級、更換字體及清除緩存。例如設置h1 { font-weight: 900; }若未生效，可通過開發者工具確認是否被其他規則覆蓋，并考慮使用!important強制應用樣式。
css設置字體粗細主要通過font-weight屬性實現，它允許你控制文本的粗細程度，讓頁面呈現出不同的視覺效果。
使用font-weight屬性，你可以調整網頁上的文字粗細，從而突出重點或改善整體排版。
如何使用數字值精確控制字體粗細？
font-weight可以使用數字值來精確控制字體粗細，范圍從100到900，其中400通常代表normal（正常），而700代表bold（粗體）。
立即學習“前端免費學習筆記（深入）”；
例如：
p { font-weight: 300; /* 細體 */ } h1 { font-weight: 700; /* 粗體 */ }
使用數字值的好處在于，你可以更精細地控制字體的粗細，而不僅僅局限于normal和bold。不過，并非所有字體都支持所有數值，實際顯示效果取決于字體本身的設計。有些字體可能只有normal、bold兩種粗細，即使你設置了其他數值，瀏覽器也會選擇最接近的粗細進行顯示。
關鍵字normal和bold之外，還有哪些常用的字體粗細關鍵字？
除了normal（400）和bold（700）之外，font-weight屬性還支持以下關鍵字：
- lighter: 比繼承的字體粗細更細。
- bolder: 比繼承的字體粗細更粗。
- 100 – 900: 數字值，如前所述。
lighter和bolder是相對于父元素的字體粗細而言的，這在處理嵌套元素時非常有用。例如，如果你希望一個段落中的某個span元素的字體比段落的字體更粗，可以使用bolder。
<p style="font-weight: 400;"> 這是一段文字，<span style="font-weight: bolder;">這里更粗</span>。 </p>
需要注意的是，lighter和bolder的效果也取決于字體本身是否支持更細或更粗的字重。
字體粗細設置不生效的常見原因有哪些？如何排查？
有時候，你可能會發現設置了font-weight屬性，但字體粗細并沒有改變。這通常有以下幾個原因：
- 字體本身不支持該粗細：如前所述，并非所有字體都支持所有字重。如果字體只支持normal和bold，那么設置其他數值可能不會生效。
- 樣式被覆蓋：CSS樣式有優先級，如果你的font-weight樣式被其他樣式覆蓋了，那么設置就不會生效。可以使用瀏覽器的開發者工具來檢查樣式是否被覆蓋。
- 繼承問題：如果父元素的font-weight設置影響了子元素，而你沒有正確地覆蓋它，也可能導致問題。
- 緩存問題：有時候，瀏覽器緩存可能導致樣式沒有及時更新。嘗試清除瀏覽器緩存或使用強制刷新（Ctrl+Shift+R）來解決。
排查方法：
- 使用開發者工具：打開瀏覽器的開發者工具，檢查元素的font-weight屬性是否生效，以及是否有其他樣式覆蓋了它。
- 檢查CSS優先級：確保你的font-weight樣式具有足夠的優先級，可以使用!important來強制應用樣式（但不推薦過度使用）。
- 嘗試不同的字體：如果懷疑是字體本身的問題，可以嘗試更換其他字體，看看是否生效。
- 清除瀏覽器緩存：嘗試清除瀏覽器緩存或使用強制刷新來排除緩存問題。
舉個例子，假設你設置了一個h1元素的font-weight為900，但字體并沒有變粗。你可以打開開發者工具，查看h1元素的樣式，看看是否有其他CSS規則設置了font-weight，并且優先級更高。如果有，你可以修改CSS規則，或者使用!important來強制應用你的樣式。
h1 { font-weight: 900 !important; /* 強制應用 */ }
總之，理解font-weight屬性的工作原理，以及掌握一些常見的排查方法，可以幫助你更好地控制網頁上的字體粗細，提升用戶體驗。
