CSS字体加粗属性font-weight工作原理

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


   font-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


   字体形式:TimesBold   分配的关键字: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; }

时间: 2024-10-10 00:07:35

CSS字体加粗属性font-weight工作原理的相关文章

UILabel 字体加粗

加粗 loginLabel.font = [UIFont fontWithName:@"Helvetica-Bold" size:20]; 加粗并且倾斜 loginLabel.font = [UIFont fontWithName:@"Helvetica-BoldOblique" size:20]; UILabel 字体加粗

LaTex中文字体加粗的问题

1. 字体加粗原理. 打开c/windows/fonts目录,以图标形式查看,我们可以发现有的图标是一张纸的样子,有的图标是几张纸叠着的样子.双击几张纸样子的图标,比如Arial,发现里面有很多个文件,有的文件名带黑体,说明对于Arial,字体文件单独区分了常规体和粗体. 我浏览了一下,发现英文大多数都单独定义了粗体,斜体,但是中文字体只有很少的会单独定义,只有雅黑和等线. 那么没有定义的字体,在加粗时,其实是软件做了简单地描边,效果肯定没有单独定义的好. 2. LaTex字体概念 LaTex字

IPHONE 字体加粗

UIFONT 没有字体加精参数,但可以修发,字体名,达到加粗的效果正常:Helvetica加粗"Helvetica-Bold""TimesNewRomanPS-BoldMT""Arial-BoldMT""CourierNewPS-BoldMT" "Georgia-Bold" IPHONE 字体加粗

UILabel字体加粗等属性和特效

/* Accessing the Text Attributes text  property font  property textColor  property textAlignment  property lineBreakMode  property enabled  property Sizing the Label’s Text adjustsFontSizeToFitWidth  property baselineAdjustment  property minimumFontS

html 字体加粗

<font style="font-weight: bold;">无敌小昆虫</font> <font>无敌小昆虫</font> font-weight: bold; 加粗字体

在safari上 input 去掉边框, 字体加粗

input{border:0px;outline:none} //outline:none可以兼容各个浏览器,尤其是在safari上,如果不加 input边框就有一个蓝色或橙色的边框 #font{font-weight:bold !important} //  !important:提高指定样式规则的应用优先权,     如果不加上提高样式优先权的话,在苹果浏览器上,safari,chrome字体就不会加粗, 目测

NGUI的字体加粗效果

ngui的UILabel可以通过属性面板(inspector)设置字体的样式:加粗 倾斜 正常等. 但是如果通过这里设置了加粗,与实际的加粗不一样,ngui有一个拉伸宽度的变化. 这让人觉得很丑 .如下图: 第二种效果就是这种丑的.宽度拉伸,其实也没怎么变粗. 最后面的就是用BBCode的实现加粗.更自然.

字体加粗

<b></b>.<strong></strong>标签都能实现字体的加粗(主要是对关键字进行加粗,目的是为了告诉搜索引擎这是我们页面所要表达的主题),但是它对优化是有影响的.所以建议使用<span></span>标签,即-------> span { font-weight:bold; }

C# DataGrid根据某列的内容设置行字体加粗 单元格设置对齐方式

最近做了个功能,DataGrid显示具体内容的时候,根据某列分组. 每个分组具体内容后边,增加一行显示合计信息. 查询数据时,使用了union all将分组数据与明细数据合并起来,使用了排序达到了预期的效果. 绑定数据的时候,为了合计行比较醒目,所以把合并行加粗了,合计列居中. 界面如下图: DataGrid前台: 1 <asp:DataGrid ID="dgList" DataKeyField="ID" runat="server" Au