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

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

Kisplay2024/12/19

你也用 Shazam 找到咖啡廳播放的愛曲?恭喜成為 1000 億分之 1

Kisplay2024/11/21

Final Cut Pro 11 全新登場!帶來智慧影片剪輯新時代

Kisplay2024/11/14

達梭系統推出新一代 3D 設計軟體 SOLIDWORKS 2025,進一步加速產品開發流程

Kisplay2024/11/06

Wondershare Virbo最佳的 AI 人工智慧 應用 影片生成器,手機電腦都能用!

麥兜小米2024/09/27

飛人工具 Pokémon GO “無法偵測目前位置12”已解決!MocPOGO、iToolab AnyGo 和 FonesGO 三種方法快速修復| 支援iOS&Android!

麥兜小米2024/07/29
-->
一起用好點子過好生活吧!