CSS字体加粗总结
2016-03-16 11:54
369 查看
CSS 加粗知识与CSS 加粗实例
DIV+CSS基础知识CSS 加粗这里指的是通过DIV CSS控制对象的加粗。
使用CSS属性单词
font-weight
对象值：从100到900，最常用font-weight的值为bold
font-weight参数：
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Html常规加粗标签
以前html直接对对象加粗的标签如下：
<b></b>或<strong></strong>两者效果相同。
加粗实例，：
<strong>我被加粗</strong><br />
<b>我也被加粗了</b><br/>
.yangshi1{ font-weight:bold}
.yangshi2{ font-weight:800}
Div html代码：
<span class="yangshi1">我被加粗</span><br />
<span class="yangshi2">我也被加粗了</span><br />
总结
1、在html对对象直接加粗可以用<b>或<strong>对其加粗
2、使用CSS加粗对象可以使用font-weight:bold即可实现加粗。
========
CSS font-weight 属性
实例设置三个段落的字体的粗细：
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
浏览器支持
IE Firefox
Chrome Safari
Opera
所有主流浏览器都支持 font-weight 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
font-weight 属性设置文本的粗细。
说明
该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于
bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样
粗。
默认值： normal
继承性： yes
版本： CSS1
JavaScript 语法： object.style.fontWeight="900"
可能的值
值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。
========
CSS字体加粗代码设置实例
使用CSS的font-weight属性可以定义字体是否显示为加粗和变细的效果。1. 在CSS样式表中设置字体加粗的样式规则。代码如下：
<style type="text/css">
<!--
p{font-size:18px;}
.p1{font-weight:normal;}
.p2{font-weight:bold;}
.p3{font-weight:bolder;}
.p4{font-weight:lighter;}
.p5{font-weight:100;}
.p6{font-weight:200;}
.p7{font-weight:300;}
.p8{font-weight:400;}
.p9{font-weight:500;}
.p10{font-weight:600;}
.p11{font-weight:700;}
.p12{font-weight:800;}
.p13{font-weight:900;}
-->
</style>
在上面的样式规则中，首先使用p标签选择器将所有的p元素都通过font-size属性把字体的大小设置为18
像素，然后使用类选择器给不同的p元素定义字体加粗或变细的规则。
2. 将类选择器应用到HTML网页的元素中。代码如下：
<body>
<p class="p1">font-weight属性设置为normal</p>
<p class="p2">font-weight属性设置为bold</p>
<p class="p3">font-weight属性设置为bolder</p>
<p class="p4">font-weight属性设置为lighter</p>
<p class="p5">font-weight属性设置为100</p>
<p class="p6">font-weight属性设置为200</p>
<p class="p7">font-weight属性设置为300</p>
<p class="p8">font-weight属性设置为400</p>
<p class="p9">font-weight属性设置为500</p>
<p class="p10">font-weight属性设置为600</p>
<p class="p11">font-weight属性设置为700</p>
<p class="p12">font-weight属性设置为800</p>
<p class="p13">font-weight属性设置为900</p>
</body>
上面的代码将这13个类选择器分别应用到了不同内容的p元素中，使每一个p元素中的字体都具备了加粗
和变细的效果，同时定义元素中字体的大小为10px，以使字体的加粗效果更加明显。
3. 在浏览器中浏览字体加粗的显示效果。如下图所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS字体加粗代码设置实例-www.baike369.com</title>
<style type="text/css">
<!--
p{font-size:18px;}
.p1{font-weight:normal;}
.p2{font-weight:bold;}
.p3{font-weight:bolder;}
.p4{font-weight:lighter;}
.p5{font-weight:100;}
.p6{font-weight:200;}
.p7{font-weight:300;}
.p8{font-weight:400;}
.p9{font-weight:500;}
.p10{font-weight:600;}
.p11{font-weight:700;}
.p12{font-weight:800;}
.p13{font-weight:900;}
-->
</style>
</head>
<body>
<p class="p1">font-weight属性设置为normal</p>
<p class="p2">font-weight属性设置为bold</p>
<p class="p3">font-weight属性设置为bolder</p>
<p class="p4">font-weight属性设置为lighter</p>
<p class="p5">font-weight属性设置为100</p>
<p class="p6">font-weight属性设置为200</p>
<p class="p7">font-weight属性设置为300</p>
<p class="p8">font-weight属性设置为400</p>
<p class="p9">font-weight属性设置为500</p>
<p class="p10">font-weight属性设置为600</p>
<p class="p11">font-weight属性设置为700</p>
<p class="p12">font-weight属性设置为800</p>
<p class="p13">font-weight属性设置为900</p>
</body>
</html>
========
css 文字加粗字体加粗代码有哪些加粗方式
我们常常对HTML代码中文字字体进行加粗，无论中文、英文、数字以及符合进行加粗布局。DIVCSS5给大家介绍几种方法包括使用CSS加粗样式或HTML加粗标签。通过CSS实现文字加粗与HTML加粗标签实现文字
加粗。
一、css加粗
CSS 加粗样式单词为font-weight
使用语法：
div{font-weight:bold }
代表对DIV盒子内文字进行加粗样式设置。
二、HTML加粗标签
HTML加粗标签共有2个一个是<b></b>另外一个为<strong></strong>
语法：
1、<b>我被b标签加粗</b>
2、<strong>我被strong标签加粗</strong>
扩展阅读：
三、css加粗与html加粗区别
Css和html标签加粗本质效果没有区别，都是对文字字体内容进行加粗粗体显示。一个是通过css样式扩
展，一个直接对文字内容用加粗标签进行文字加粗。
四、如果选择css加粗还是标签加粗
无论是div css加粗还是b和strong标签加粗均可，有时为了节约html标签，让HTML源代码更简洁我们就
设置css加粗方式进行对文字字体加粗。但有时我们需要B或strong标签进行加粗，为了有利于SEO，我们
可以选择html标签方式进行加粗。
========
DIV CSS文字粗体字如何实现
CSS DIV文字粗体字如何实现 html文字粗体如何设置？字体加粗与粗体实现篇！DIVCSS5为大家介绍两种对文本文字粗体字体加粗方法：
一、使用html 加粗标签
使用b标签或strong标签即可对文字粗体。
1、分别对应语法如下：
<b></b>
<strong><strong>
2、应用案例
1）、html案例完整代码（可以拷贝测试）：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>粗体实现 </title>
</head>
<body>
我是正常字体<br />
<b>我被b粗体</b><br />
<strong>我被strong粗体</strong>
</body>
</html>
2）、html粗体截图：
二、使用CSS样式实现文字粗体显示
div+css布局中，使用css样式实现文字字体粗体比较多的，只需要对对象设置一个粗体样式属性即可实
现文本粗体，又称为css文字粗体。
1、css粗体样式基础
1）、单词与介绍
font-weight，值为可以为从100到900，和bold，最常用font-weight的值为bold，也是所有浏览器均兼
容。
2）、css 粗体语法：
div{font-weight:bold}
这样就让所有div对象内文字字体加粗
2、粗体css案例
1)、加粗粗体案例HTML源代码（div+css布局案例）（大家可以拷贝使用和测试）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>粗体实现 DIVCSS5案例</title>
<style>
.bold{ font-weight:bold}
</style>
</head>
<body>
<div>我是正常字体</div>
<div class="bold">我被font-weight粗体</div>
</body>
</html>
三、关于字体文本粗体总结
标签加粗与CSS样式粗体
样式粗体与html标签粗体 加粗方式
========
CSS去掉b加粗和strong加粗标签样式
如何使用DIV+CSS去掉html中b加粗和strong加粗样式1、使用CSS样式属性单词：
font-weight
2、语法
去掉对象加粗：font-weight:normal
文字字体加粗：font-weight:bold
3、CSS去除html b和html strong加粗样式案例
去除html加粗标签加粗案例，假如我们需要对"divcss5"命名div盒子里的b加粗和strong加粗标签所加粗
内容去除加粗样式(html b加粗与strong加粗区别)。
1）、去掉加粗Css代码：
.divcss5 b{font-weight:normal}
.divcss5 strong{font-weight:normal}
以上2段代码分别设置divcss5对象内b标签和strong标签去掉加粗样式（font-weight:normal）
2）、去掉加粗html代码：
<div>
<b>我在b标签内</b><br />
<strong>我在strong标签内</strong>
</div>
<p></p>
<div class="divcss5">
<b>我在加粗标签b内，但被CSS样式去除加粗</b><br />
<strong>我在加粗标签strong内，但被CSS样式去除加粗</strong>
</div>
4、div css去掉html加粗标签加粗样式总结
为什么要去除去掉html加粗标签本身加粗样式，通常我们布局时候考虑标签重用，有时也考虑搜索引擎
优化，对文字字体加上加粗标签（html b加粗或html strong加粗）后，但不需要加粗样式，这个时候我
们就可以使用font-weight:normal去掉b和strong本身加粗样式，让html加有加粗标签内容文字变正常（
不加粗）。有时我们只需对某处的html加有加粗标签地方内容不加粗，我们可以如上案例那样，在建立
css样式选择器时候前面加一个上级css类（css样式命名如案例：.divcss5 b{...}）即可只去掉需要对
应css类下加粗标签不加粗样式。
========
HTML <B>加粗标签
一、语法与结构<b> XXXXXXX </b>
二、Html b加粗标签使用说明
<b></b>加粗标签元素告诉浏览器把其加b标签的文本以粗体方式显示给浏览者。对于所有浏览器来说，
这意味着要把这段文字加粗（粗体）样式方式呈现给大家显示。Html strong加粗标签与html B加粗标签
显示效果相同，两者都将内容文本加粗方式显示呈现，两者都可以选择使用,
三、b标签使用案例
我是DIVCSS5!<br />
我被HTML B标签<b>加粗</b>。
五、b加粗总结
1、<b> 标签修饰的内容将被加粗显示。
2、html b加粗标签显示样式与html strong加粗标签显示样式相同，用法相同。
3、对应在HTML网页中文本文字需要加粗显示，b和strong标签都可以使用。
========
HTML <strong>加粗粗体标签元素
一、语法与结构<strong> XXXXXXXX </strong>
二、Html strong加粗标签使用说明
<strong></strong>加粗标签元素告诉浏览器把其加strong标签的文本以加粗方式显示给浏览者。对于所
有浏览器来说，这意味着要把这段文字加粗呈现给大家显示。Html strong加粗标签与html B加粗标签显
示效果相同，两者都将内容文本加粗方式显示呈现，两者都可以选择使用,扩展阅读：css font-weight
加粗。
三、strong标签使用案例
我是DIVCSS5!<br />
我被HTML strong标签<strong>加粗</strong>。
五、加粗总结
1、<strong> 标签修饰的内容将被加粗(了解css字体加粗)方式显示。
2、html b加粗标签显示样式与html strong加粗标签显示样式相同，用法相同。
3、对应在HTML网页中文本文字需要加粗显示，b和strong标签都可以使用。
========
html <b>加粗与<strong>加粗标签区别
html b加粗与strong加粗标签区别在哪1、html b与strong加粗标签区别
<b></b>加粗标签与<strong></strong>加粗标签区别在于前者只有1个字符，后者6个字符字母标签。
2、b与strong用法区别
Html b与html strong加粗标签用法没有区别，一般想节约字节字符就用b加粗标签，建议大家不要刻意
追求这两者用法与区别
加粗用法案例片段代码如下：
<b>我被B标签加粗</b><br />
<strong>我被Strong标签加粗</strong><br />
3、总结
Html b加粗与html strong加粗本质没有区别，用法语法也没有区别，建议大家不要刻意追求此问题；就
按照平时习惯使用这两者加粗标签即可；html b加粗标签是比较早的html出现使用加粗功能标签，而
html strong稍后一点，至今所有浏览器都支持这两者加粗功能。
========
css如何去掉h1 h2 h3 h4加粗并统一字体大小
css如何去掉h1 h2 h3 h4加粗并统一字体大小样式如何使用div css去掉<h1><h2><h3><h4>等标题标签默认加粗样式，同时统一这几个标题标签默认css字
体大小。
这里我们用到css font-weight样式去掉加粗，并且用到css font-size设置统一字体文字大小样式。
对于这html中使用h1 h2 h3 h4标签，如果要统一去掉加粗，并统一字体大小，我们可以这样初始化CSS
。
h1,h2,h3,h4{font-weight:normal;font-size:12px}
这样我们就初始地去掉加粗（font-weight:normal）、和设置统一字体大小为12px像素。
========
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3的文字阴影—text-shadow
- CSS控制元素的在页面中水平、垂直居中
- 推荐几款主流的Css Reset
- css技巧
- CSS之可折叠导航
- CSS之可折叠导航
- 可自定义箭头样式的CSS3气泡提示框
- 简单的DIV+CSS布局
- CSS代码编码规范
- 6种非常炫酷的CSS3按钮边框动画特效
- 理解CSS3 transform中的Matrix(矩阵)
- Selenium基础知识（详解IDE命令、css及xpath定位一）
- css 实现垂直居中
- h5整理--详解css的相对定位和绝对定位
- （转）详解css3弹性盒模型（Flexbox)
- 4、CSS基础part-2
- CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
- css样式初始化
- 纯CSS3实现8组超炫酷鼠标滑过图片动画
- CSS 有趣的边框