css font-weight 属性设置文本字体的粗细
时间:2016-06-27
在CSS中,使用font-weight属性来定义字体粗细,粗细值可以取关键字和100~900的数值,本文章向大家介绍css font-weight属性设置文本字体的粗细,需要的朋友可以参考一下。
css font-weight介绍
在CSS中,font-weight属性用来定义字体粗细。font-weight属于css1版,所以所有主流浏览器都支持font-weight属性。
初学者要注意,字体粗细和字体大小(font-size)是不一样的,粗细指的是字体的“肥胖”,大小指的是高和宽。大家好好理解一下就很容易区分了。
语法:
font-weight:粗细值;
粗细值可以取关键字和100~900的数值。如下表。
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
|
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
字体粗细font-weight属性值可以取100、200、…、900这九个值。400相当于正常字体normal,700相当于bold。100~900分别表示字体的粗细,是对字体粗细的一种量化方式,值越大就表示越粗,值越小就表示越细。
对于中文网页来说,一般仅用到bold、normal这两个属性值完全就可以了,粗细值不建议使用数值(100~900)。
css font-weight实例
三段文字设置不同的字体粗细:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
相关文章
CSS 教程: CSS Font
CSS 参考手册: font 属性
CSS 参考手册: CSS font-weight
- [喵咪大数据]Hadoop单机模式
- 【死磕Java并发】—–Java内存模型之happens-before
- 9个,程序员又爱又恨的编程习惯
- Dubbo 源码解析 —— Cluster
- 【死磕Java并发】—–Java内存模型之从JMM角度分析DCL
- 基于PhalApi2的Redis拓展
- [喵咪BELK实战(3)] logstash+filebeat搭建
- Dubbo源码解析 —— Router
- 【死磕Java并发】—–深入分析volatile的实现原理
- phalcon-入门篇3(优美的URL与Config)
- 数据库中间件 Sharding-JDBC 源码分析 —— 事务(一)之BED
- 熔断器 Hystrix 源码解析 —— 命令执行(二)之执行隔离策略
- phalapi-入门篇4(国际化高可用和自动生成文档)
- 用JavaScript动态输出的JS脚本不能执行
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- String - 68. Text Justification
- String - 273. Integer to English Words
- String - 12. Integer to Roman
- Dynamic Programming - 62. Unique Paths
- Dynamic Programming - 70. Climbing Stairs
- LinkedList - 23. Merge k Sorted Lists
- LinkedList - 86. Partition List
- LinkedList - 148. Sort List
- LinkedList - 61. Rotate List
- LinkedList - 143. Reorder List
- LinkedList - 160. Intersection of Two Linked Lists
- LinkedList - 21. Merge Two Sorted Lists
- LinkedList - 82. Remove Duplicates from Sorted List II
- LinkedList - 203. Remove Linked List Elements
- LinkedList - 83. Remove Duplicates from Sorted List