搜尋
首頁web前端css教學CSS中關於字體​​加粗屬性font-weight以及運作方式的詳解

  font-weight允許值   normal | bold | bolder | lighter | l00 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

##  weight初始值   normal

   font-weight可否繼承   是

   font-weight適用於   所有元素

要理解用戶代理怎麼決定字體變形的粗細,得先從關鍵字100到900談起,然後我們再來看它是如何繼承的。

   這些數字關鍵字用來定義與字體的相關特徵的映射關係,即字體的粗細被分成九個等級。例如,OpenType就使用了九個值的數字級。字體有了這 等級之後,這些數字就直接映射到各個級,如100映射到最輕的字體變形,而900對應最重的字體變形。

   事實上,在這些數字中並不存在本質的字體粗細的約定。 CSS指出,每個數字對應的字體粗細不得小於它前面的數字所對應的字體粗細。

   這樣,100,200,300和400或許都對應同樣粗細的字體變形,而500和600可能對應到一個更粗的字體變形,700,800和900則對應下另一種更粗的字體變形。

   這數字被定義為同某些普通的,而
700對應於bold

字體變形名等價。

400等價丁normal

   其他數字不對應任何

font-weight屬性的關鍵字,但它們可以對應到普通的字體變形名。如果某種字體變形標記為“Normal”、“Regular”、“Roman”或“Book”,那麼它便被分配給400,而且任何標記為“Medium”的字體變形就對應於500。

   然而,如果標示為「Medium」的字體變形是唯一可用的字體,那麼它就不能與500相對應。

   如果在某個給定的字體系列裡少於九個字體粗細級,則使用者代理需要做更多的工作。在這種情況下,它必須用一種預先定義的方式來填滿其間的空隙:

   如果值500未分配,它就被賦予同400一樣的

字體粗細。

   如果300未分配,它就比400稍輕的字體變形對應。如果沒有更輕的字體可用,300就同400一樣對應某個層級。這通常是在“Normal”和“Medium”情況下。同樣的方法用於100和200。

   如果600未分配,它便與400稍重的字體變形對應。如果沒有這樣的字體可用,600就同500一樣對應某種字體變形。這種方法也用於700,800和900。

   為了方便理解,讓我們來看三個

字體粗細分配的例子,首先假設字體系列Karrank%是OpenType字體,而且已經定義了9個對應的粗細級。

   在這裡,這些數字分別對應於各級,而關鍵字normal和bold各自分配給400和700。在第二個例子裡,我們考慮字體系列Zurich,它在本內容的開始提到。假設其字體變形也被分配了下面的粗細值。

  
字體形式:Zurich Light   指派的關鍵字:空白   指派的數字:100,200,300


#  字體


#形式:Zurich Regular   分配的關鍵字:normal   分配的數字:400


##    字體形式:Zurich Medium   分配的關鍵字:   分配的數字:500


   字體形式:Zurich Bold   指派的關鍵字:bold   指派的數字:600,700



##    字體形式:Zurich Black   指派的關鍵字:空白   指派的數字:800


   字體形式: Zurich UltraBlack   分配的關鍵字:空   分配的數字:900

### ###    前三個數字分配給最輕的字體。普通字體對應關鍵字400和normal。 ######    Medium字體分配給數字500。沒有字體變形分配給600,因此將600和700一起對應於同一字體變形Bold字體。最後800和900分別分配給Black和UltraBlack######字體變形。 ###### ###    也只有當最上面的兩個粗細級已經分配後,才會出現這樣的情況。 ######    否則使用者代理程式可能會忽略它們,並將800和900指派給Bold字體,或將它們指派給兩個Black字體變形之一。最後,讓我們來看看Times宇體,它只有兩種字體變形,TimesRegulal和TimesBold,如下所示。 ###


   字體形式:TimesRegular   指派的關鍵字:normal   已指派的數字:100,200,300,400,500

的關鍵字:bold   分配的數字:600,700,800,900
   關鍵宇normal和bold的分配相當直接。對於這些數字,100到300分配給Regular字體,但500怎麼辦呢?它被分配給Regular字體了,因為沒有Medium字體;這樣它就同400一樣了。

   剩下的,700總是分配給bold字體,而800和900,由於缺乏更粗的字體,也分配給Bold字體。最後,600被分配到下一個

更粗的字體,當然,也只有bold字體了。

   字體粗細可被繼承,如果將段落設為bold,則所有的子元素都會繼承粗體,如下:

   p.one {
font-weight:bold; }

以上是CSS中關於字體​​加粗屬性font-weight以及運作方式的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Flexbox vs Grid:我應該學習兩者嗎?Flexbox vs Grid:我應該學習兩者嗎?May 10, 2025 am 12:01 AM

是的,youshouldlearnbothflexboxandgrid.1)flexboxisidealforone-demensional,flexiblelayoutslikenavigationmenus.2)gridexcelstcelsintwo-dimensional,confffferDesignssignssuchasmagagazineLayouts.3)blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學(或我如何優化CSS KeyFrames動畫)軌道力學(或我如何優化CSS KeyFrames動畫)May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的?約翰·瑞亞(John Rhea)挑選了他寫的一個舊的CSS動畫,並介紹了優化它的思維過程。

CSS動畫:很難創建它們嗎?CSS動畫:很難創建它們嗎?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS:最常用的技巧@KeyFrames CSS:最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcsssanimations.keytricksinclude:1)definingsmoothtransitionsbetnestates,2)使用AnimatingMultatingMultationMultationProperPertiessimultane,3)使用使用4)使用BombingeNtibalibility,4)使用CombanningWiThjavoFofofofoftofofo

CSS計數器:自動編號的綜合指南CSS計數器:自動編號的綜合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1)他們可以使用forterablesofcontents,ListItems,and customnumbering.2)AdvancedsincludenestednumberingSystems.3)挑戰挑戰InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4)創造性

使用捲軸驅動動畫的現代滾動陰影使用捲軸驅動動畫的現代滾動陰影May 07, 2025 am 10:34 AM

使用滾動陰影,尤其是對於移動設備,是克里斯以前涵蓋的一個微妙的UX。傑夫(Geoff)涵蓋了一種使用動畫限制屬性的新方法。這是另一種方式。

重新訪問圖像圖重新訪問圖像圖May 07, 2025 am 09:40 AM

讓我們快速進修。圖像地圖一直返回到HTML 3.2,首先是服務器端地圖,然後使用映射和區域元素通過圖像上的單擊區域定義了可單擊區域。

DEV狀態:每個開發人員的調查DEV狀態:每個開發人員的調查May 07, 2025 am 09:30 AM

開發委員會調查現已開始參與,並且與以前的調查不同,它涵蓋了除法:職業,工作場所,以及健康,愛好等。 

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器