要設置html文本字體粗細，主要使用css的font-weight屬性。1. 該屬性支持關鍵字值如normal（400）、bold（700）、bolder和lighter；2. 同時也支持從100到900的數值，分別對應thin至black的不同粗細等級；3. 可通過html內聯樣式或css樣式表進行設置；4. 控制不同層級標題的粗細時，可利用h1、h2等選擇器分別定義各自的font-weight值；5. 在響應式設計中，可通過媒體查詢調整小屏幕上的字體粗細以提升可讀性；6. 現代瀏覽器普遍支持font-weight，但具體效果依賴于所用字體的支持情況，某些字體可能僅支持normal和bold，因此建議測試實際顯示效果并根據需要引入特定字體文件。
HTML設置文本字體粗細，主要通過CSS的font-weight屬性來實現。它允許你控制文本的加粗程度，從細到粗，提供了多種預設值和數值選項，讓文本呈現出不同的視覺效果。
解決方案
font-weight屬性接受多種取值，可以分為關鍵字和數值兩種類型。
立即學習“前端免費學習筆記（深入）”；
關鍵字取值：
- normal: 默認值，相當于數值400，表示正常的字體粗細。
- bold: 加粗，相當于數值700。
- bolder: 比繼承的字體更粗。
- lighter: 比繼承的字體更細。
數值取值：
font-weight也可以接受100到900之間的數值，以100為增量。
- 100: Thin (極細)
- 200: Extra Light (特細)
- 300: Light (細)
- 400: Normal (正常)
- 500: Medium (中等)
- 600: Semi Bold (半粗)
- 700: Bold (粗)
- 800: Extra Bold (特粗)
- 900: Black (極粗)
使用方法：
可以直接在html元素的style屬性中設置，也可以通過CSS樣式表來定義。
示例：
HTML內聯樣式：
<p style="font-weight: bold;">這段文字是加粗的。</p>
CSS樣式表：
p { font-weight: 600; /* 半粗 */ } .light-text { font-weight: 300; /* 細體 */ }
選擇合適的數值：
選擇哪個數值，其實挺主觀的。一般來說，400是默認的正常粗細，700是加粗。但具體用哪個，最好還是根據實際的字體和設計需求來調整。有些字體本身就比較粗，可能500就足夠了。
如何通過CSS控制不同層級標題的字體粗細？
控制不同層級標題的字體粗細，可以利用CSS的選擇器。比如，h1、h2、h3等標簽，可以單獨設置它們的font-weight。
h1 { font-weight: bold; /* h1標題加粗 */ } h2 { font-weight: 600; /* h2標題半粗 */ } h3 { font-weight: normal; /* h3標題正常 */ }
這樣，每個層級的標題就會有不同的粗細程度，從而區分它們的重要性。
font-weight屬性在響應式設計中的應用技巧？
在響應式設計中，font-weight可以用來優化不同屏幕尺寸下的閱讀體驗。例如，在小屏幕上，可以適當增加字體粗細，以提高可讀性。
示例：
p { font-weight: normal; /* 默認正常 */ } @media (max-width: 768px) { p { font-weight: 500; /* 小屏幕上略微加粗 */ } }
這個例子中，當屏幕寬度小于768像素時，段落文字的粗細會變為500，比默認的normal略微加粗，增強在小屏幕上的顯示效果。
瀏覽器對font-weight屬性的支持程度如何？
font-weight屬性是CSS規范的一部分，現代瀏覽器都提供了良好的支持。但是，需要注意的是，并非所有字體都支持所有的font-weight數值。有些字體可能只提供了normal和bold兩種粗細。如果選擇的數值字體不支持，瀏覽器會自動選擇最接近的粗細。因此，在選擇字體和font-weight時，最好進行測試，確保在目標瀏覽器上顯示效果符合預期。另外，使用一些特殊的字體時，可能需要引入對應的字體文件，以確保font-weight屬性能夠正常工作。
