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 軟體遊戲

ChatGPT 4.5 來了 文字工作者的最佳助手出現?

Kisplay2025/03/08

HTC 在 MWC 2025 展示 VIVERSE 新技術:AI、XR、3D 打造沉浸式未來

Kisplay2025/03/05

HTC 推出 VIVERSE Worlds 3D 內容核心平台,讓 3D 互動體驗更輕鬆

Kisplay2025/03/03

打破高成本 AI 發展模式?DeepSeek 真能挑戰 AI 市場?

Kisplay2025/02/12

德知士資訊捐贈資安系統 助台灣亞洲交流基金會提升國際合作防護力

Kisplay2025/01/22

2024 GAMFORCE 電競嘉年華揭幕 探索軟硬整合與創作的無限可能

Kisplay2024/12/19
-->
一起用好點子過好生活吧!