CSS教學-font-weight 屬性讓網頁內建的繁中字型也有極細黑、中黑、粗黑,九種不一樣的粗細變化

當今天在設計網頁時,網頁的字型就是那101款,自從有了雲端字型後,才讓網頁字型有了不一樣的變化,但雲端字型並非免費,當網站的流量愈大,相對的費用也愈高,因此這時可選擇Google的雲端字型,雖然免費且也沒流量限制,但在網頁一開始載入時,則會有些緩慢,其實早在CSS1.1的時代中,就可透過一些文字屬性,來設定字型與字體的變化,透過這種方式來設定字型,則會自動載入使用者電腦中的字型作顯示,因此完全不會有遲緩的問題,再加上現在的Windows內建也都有微軟體中黑,因此這也讓網頁字,從原來的新細明體,多了一組新選擇。

梅問題-CSS教學-font-weight 屬性讓網頁內建的繁中字型也有極細黑、中黑、粗黑不一樣變化

除了透過CSS來指定字型外,其實在CSS的文字屬性中,還有一個相當重要的屬性,那就是font-weight,透過font-weight可設定文字的粗細變化,讓繁中字型也有極細黑、中黑以及粗黑,而一般大家往往都會乎略這個屬性,以為只有正常跟粗體,其實font-weight中共有九組不同的粗細變化,因此要如何來設定,現在也一塊來看看囉!


font-weight

描述
normal 預設值。
bold 粗體。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
一共有九變化,從100~900,而normal預設是400,bold粗體是700。
inherit 继承父層元素。

接下來實際來試試看,分別從100~900,就可清楚的看出,不一樣粗細的字型變化,同時在設定100~900後方是無需加任何的單位,只需單純填入數字即可,有了font-weight這屬性,讓網頁字型更有變化呀!且設定更簡單,因此下回不妨可試看看囉~

軟體遊戲

More in 軟體遊戲

Apple Intelligence 正式支援繁體中文,AI 功能全面登場

Kisplay2025/11/04

金融素養怎麼培養?3 個省錢又環保的理財觀念

AD2025/10/04

Plaud Inc 資安聲明:台灣使用者資料儲存在 AWS 美國西部,僅委託深圳進行硬體製造、不提供 AI 服務

Kisplay2025/09/03

Google Gemini 推出全新圖片生成與編輯功能 樣貌維持一致、風格自由變換

Kisplay2025/08/28

TikTok 推出五大新功能 強化內容檢查與互動管理 協助創作者打造更友善社群

Kisplay2025/08/06

Google NotebookLM 推出全新影片摘要功能,讓資料整理更有效率

Kisplay2025/07/30
-->
一起用好點子過好生活吧!