html table font-weight,font-weight
字体粗细设置属于一种比较复杂的字体样式定义,之所以说它复杂,是因为字体本身粗细千变万化,没有统一标准,对于字体粗细的具体定义也各不相同。
中文名
字体粗细外文名
font-weight
font-weight简介
编辑
语音
本节主要讨论的就是在如此纷繁的字体粗细标准中,总结出一套可行的规律。
:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |继承值
初始值:normal
作用于:所有元素
是否继承:是
百分比值:不适用
计算值:见文本
font-weight指定方法
编辑
语音
font-weight的属性值有3种指定方法:第1种是关键字法,关键字包括“normal”和“bold”两个;第2种是相对粗细值法,相对粗细也是由关键字定义,但是它的粗细是相对于上级元素的继承值而言的,包括“bolder”和“lighter”两个;第3种为数字法,包括从“100”到“900”的9个数字序列(注意,只能是100、200之类的整百数)。这些数字序列代表从最细(100)到最粗(900)的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。
font-weight示例
编辑
语音
示例1演示了font-weight属性所描述的关键字所对应的一般效果,这里选择Windows常用的Times New Roman字体作为演示效果,如图1所示。
图1示例1
CSS Demo
body,table,tr,td { font-family: "Times New Roman", Times;
font-size: 18pt; }
table { border-collapse: collapse; }
关键字 | 效果 |
---|---|
normal | The quick brown fox jumps over a lazy dog. |
bold | The quick brown fox jumps over a lazy dog. |
bolder | The quick brown fox jumps over a lazy dog. |
lighter | The quick brown fox jumps over a lazy dog. |
100 | The quick brown fox jumps over a lazy dog. |
200 | The quick brown fox jumps over a lazy dog. |
300 | The quick brown fox jumps over a lazy dog. |
400 | The quick brown fox jumps over a lazy dog. |
500 | The quick brown fox jumps over a lazy dog. |
600 | The quick brown fox jumps over a lazy dog. |
700 | The quick brown fox jumps over a lazy dog. |
800 | The quick brown fox jumps over a lazy dog. |
900 | The quick brown fox jumps over a lazy dog. |
font-weight效果
编辑
语音
font-weight 进入页面字体的粗和细这种描述方法本身就是一种相对描述,所谓粗和细也必须要有一个参照体。例如,在上面介绍的3类属性值之间需要有一个相互对照匹配的过程,这是一个很难界定的过程。关键字“normal”相当于“400”,“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解,无法直接和数值相匹配,此时字体的粗细程度通常取决于字体本身的设置。
在以下介绍的内容中,将通过一些普遍的法则,来描述字体粗细程度的规律。
对于林林总总的字体而言,目前并没有一个统一的规则标明粗细的程度。有的字体名称本身就能描绘粗细程度,如图2所示,在“Arial Bold”等类似字体的名称中,本身就能表示自己的粗细。Arial Bold的字体显示也确实要比Arial粗不少。
图2
像这样的字体名称的主要作用就是在单个字体集中区别字体的粗细程度,例如在Arial字体集中区别粗细程度。
另外,有的字体看上去比较粗,但是它们的字体描述却是“Regular、Roman、Book(常规)”、“Medium、Semi-(半)”或者“DemiBold、Bold、Black(黑体)”等字样,这主要取决于该字体本身“normal”表示的粗细程度。
正因为没有一个标准的字体名称用法,所以当前CSS 2.1版本的粗细属性值用“400”代表“normal”无论它究竟有多粗或者多细。与“normal”或者“400”相关联的粗细名称通常是“Book、Regular、Roman、Normal、Medium”,表示“普通、中等”的意思。
在字体集名称和9级数值之间,有着一些对应关系,表3列举了一些映射规则。
font-weight映射规则
编辑
语音
条 件处 理 方 式
如果字体集中已经使用了9级数值的范围(例如OpenType一样)字体的粗细应该直接与9级数值相匹配
如果一种字体同时拥有Medium,还有Book、Regular、Roman或者Normal的字体集名称Medium通常分配为“500”,其他4个分配为“400”
字体集中有标记为“bold”的名称相当于“700”数值
如果字体集中少于9级粗细级别参照缺失填补方式,即表5.6所示
如果字体集中少于9级粗细度算法,那么填补缺失的方法如表4所示。
表4 填补缺失的方法缺 失 数 值填 补 方 法
“500”缺失和“400”相同
缺失“600、700、800、900”中任何一个值和下一等级较粗的值相同。如果没有,则和下一等级较细的值相同
缺失“300、200、100”中任何一个值和下一等级较细的值相同。如果没有,则和下一等级较粗的值相同
例如,如果一个字体中缺失“500”和“900”,那么该字体的9级粗细值就应该相当于“100、200、300、400、400、600、700、800、800”。
表5所示的是一种字体的常规对应方式,假设有一种字体叫做“Myownfont1”,它共有Regular、Medium、Bold、Heavy等4个关键字表示粗细等级,则对应匹配方式如下。
表5 字体常规对应方式可用字体名分 配填 补 空 缺
Myownfont1 Regular400100、200、300
Myownfont1 Medium500-
Myownfont1 Bold700600
Myownfont1 Heavy800900
假设有一种字体叫做“Myownfont2”,共有6个等级,此时对应匹配方式如表6所示。
表6 Myownfont2的对应匹配方式可用字体名分 配填 补 空 缺
Myownfont2 Book400100、200、300
Myownfont2 Medium500-
Myownfont2 Bold700600
Myownfont2 Heavy800-
Myownfont2 Black900-
Myownfont2 ExtraBlack不分配-
由表6可以看出,浏览器不会为ExtraBlack的关键字分配9级数值对应匹配。
有了以上匹配方式,对于“bolder”和“lighter”的匹配也不难理解。“bolder”就是匹配字体集中可用的下一级较粗字体,反之“lighter”也是一样,匹配下一级较细字体。它们的参照系都是继承值,因此粗细程度都是相对于继承值而言的。注 意如果继承值已经是“900”,那么无论添加多少“bold”关键字也不会再加粗字体。
对于字体的粗细程度的定义就基本限于以上介绍的内容。对于实际应用而言,一般设计者不会在一篇文章中定义超过3级的粗细程度,且设计的时候粗细程度应该有所跳跃,否则反而不能突出加粗的内容。
词条图册
更多图册
html table font-weight,font-weight相关推荐
- Linux环境下Font font = new Font(黑体, Font.BOLD, 18)[BufferedImage~Graphics~drawString]中文乱码
Linux环境下"Font font = new Font("黑体", Font.BOLD, 18)"[BufferedImage~Graphics~drawS ...
- LaTeX Font Warning: Font shape `OMS/cmtt/m/n' undefined
原帖地址:https://natanor.blogspot.com/2010/06/latex-font-warning-font-shape-omscmttmn.html 最近在用TexShop写一 ...
- Linux环境Font font = new Font() 中文乱码 (带字体资源)
一.前言 当我们在windows 上面用java 程序的Font 的时候 是可以显示中文文字的,但是在linux 上面就显示不出来了 这个是linux 上面没有对应的字体,只需要上传上去就可以了 但是 ...
- Linux环境Font font = new Font(“宋体“,Font.PLAIN,25) Graphics.drawString()中文乱码
通过java代码生成图片时,图片上包含中文文字时,在windows环境下正常显示,但是在linux环境中可能出线乱码情况,这是由于您的linux服务器上没有中文字体导致的. 解决方案如下: [1].检 ...
- swift - label 的font 设置 文字字体和大小
设置字体和颜色 lab.textColor = UIColor.init(hexColor: "795928")lab.font = UIFont.systemFont(ofSiz ...
- python fonttool_Python wx.Font方法代码示例
本文整理汇总了Python中wx.Font方法的典型用法代码示例.如果您正苦于以下问题:Python wx.Font方法的具体用法?Python wx.Font怎么用?Python wx.Font使用 ...
- Font Configuration and Customization for Open Source Systems - 白皮书翻译和深入
font config 作为一个linux系统的font的配置的基本要素,如何使用的一份手册翻译: 本文尝试从font config手册出发,介绍font config的基本概念和基本元素,以期待在了 ...
- matplotlib的Text、FontProperties对象、字体(font)属性|中文字体的设置|图像标题、label字体的设置
matplotlib.text.Text对象 见文档描述matplotlib.text 设置Text字体性质的方法有两个: Text.set(xxx=value) Text.set_xxx(value ...
- CSS3 字体【@font-size使用全攻略-配合font squirrel】
篇1: CSS3 字体 CSS3 @font-face 规则 以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体. 使用CSS3,网页设计师可以使用他/她喜欢的任何字体. 当你发现您要 ...
- 二十、Gtk4-GtkMenuButton, accelerators, font, pango and gsettings
本节将重新构造Tfe文本编辑器. 在工具栏上放置了打开.保存和关闭按钮.此外,GtkMenuButton被添加到工具栏中.当点击这个按钮时会显示一个弹出式菜单.在这里,弹出式的含义很广泛,包括下拉式菜 ...
最新文章
- java初反射_初始 java 反射机制 (一)
- 如何理解路由中的IP选路,修改,ICMP重定向差错?—Vecloud微云
- image是否有disabled属性_Vue学习笔记 模板语法、计算属性
- Node.js设置CORS跨域请求中多域名白名单的方法
- mysql in 文本_MySQL_mysql 的load data infile,LOAD DATA INFILE语句从一个文本文 - phpStudy...
- 凑热闹买了个小米剃须刀
- 用 Vue 做一个简单的购物app
- VISSIM二次开发(Python)大作业总结2
- 飞控中的一些知识点总结
- windows注册表恢复方法
- 计算机无法打开隐藏文件,处理怎么打开隐藏文件
- 理解Windows操作系统的KMS与MAK密钥
- eclipse 安装jetty WTP Adaptor插件
- ES6数据部分(字符串,数组,对象,symbol,set,map)
- OpenCV算法加速的一些学习总结
- 英雄杀-如何通关挑战
- 【商品架构day3】京东商品系统的演进之路 - 如何抗住亿级流量
- 同时和同步有什么区别?
- UE4安卓打包配置(大陆内网络整顿后,Android打包时AndroidWorks无法使用的解决方法)
- 网上郭德纲写的道歉信,求真伪,重口味的啊
热门文章
- Delectus dolorum impedit tempora facilis minimaFehlen Monate tragen immer draußen machen Hunge eius.
- Mybatis学习思路整理
- 数字签名理论与认证应用
- 【最强大脑vs人工智能】脑王水哥王昱珩惜败人工智能, 这不可能. - 图像识别到底是什么鬼
- aop配置异常日志管理
- wps中的相交_wps演示2016版中我找不到合并形状相交这个功能
- 你和高级工程师的差距在哪儿?
- 美通社企业新闻汇总 | 2019.1.30 | 2019旅行者之选酒店榜发布;《小猪佩奇》动画迎“猪年”...
- 【乐理学习笔记】如何读乐谱
- 如何在远程的linux服务器中搭建禅道及bugfree