您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

css中的font-weight属性实例用法详解

2024/12/3 4:18:12发布19次查看
为理解用户代理怎样决定字体变形的粗细,得先从关键字100到900谈起,然后我们再来看它是如何继承的。
   font-weight允许值   normal | bold | bolder | lighter | l00 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 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; }
以上就是css中的font-weight属性实例用法详解的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product