CSS字体加粗总结

2023-05-16

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像素。


========
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS字体加粗总结 的相关文章

  • 微信 Mars Android Sample 源码分析

    注 xff1a 原文首发地址 零 前言 Mars 是微信官方开源的跨平台跨业务的终端基础组件 xff0c 具有高质量网络连接模块 长短连接 智能心跳机制 高性能日志模块和网络监测组件等 而整个 Android Sample 是基于 Mars
  • Android NDK 开发:实战案例

    0 前言 如果只学理论 xff0c 不做实践 xff0c 不踩踩坑 xff0c 一般很难发现真正实践项目中的问题的 xff0c 也比较难以加深对技术的理解 所以延续上篇 JNI 的实战Android NDK开发 xff1a JNI实战篇 x
  • Android NDK 开发:CMake 使用

    1 前言 当在做 Android NDK 开发时 xff0c 如果不熟悉用 CMake 来构建 xff0c 读不懂 CMakeLists txt 的配置脚本 xff0c 很容易就会踩坑 xff0c 遇到编译失败 xff0c 一个很小的配置问
  • python中的“main()方法”

    估计很多人跟我一样初学python看代码的时候先找一下main 方法 xff0c 从main往下看 但事实上python中是没有你理解中的 main 方法的 言归正传 if name 61 61 34 main 34 可以看成是python
  • 【大陆ARS408毫米波雷达】一种利用串口解析雷达数据的方法

    硬件平台 xff1a ARS408毫米波雷达 can转485转换器 485转串口转换器 软件平台 xff1a Windows10 python3 本篇博客实现的功能 xff1a 一 通过两个转换器将毫米波雷达的原始数据传入电脑端的串口中 二
  • ubuntu14.04系统下对SD卡分区

    在ubuntu14 04系统下对SD卡进行分区分为3步 xff1a 注意 xff1a 进行SD卡分区时 xff0c 用户操作权限为root权限 xff01 1 umount SD卡 查看SD卡挂载目录 xff0c 一般在 media目录下
  • docker安装图形化管理界面

    首先看下这个界面的样子 还是比较好看 xff0c 而且在同一个局域网中都可以登录进行管理 说下安装教程吧 首先下载这个镜像 xff1a sudo docker pull portainer portainer 然后创建这个容器 sudo d
  • JSP小脚本学习

    小脚本 可以将任何数量的小脚本包含在页面中 xff0c 小脚本是有效的JAVA语言语句 xff0c 变量或方法声明或表达式 小脚本的语法 xff0c lt code fragment gt 入门示例 xff1b lt 64 page lan
  • 34. 在排序数组中查找元素的第一个和最后一个位置(C语言)

    笨办法 xff0c 先找第一个等于target的位置 xff0c 再找最后一个等于target的位置 Note The returned array must be malloced assume caller calls free int
  • 详解如何将TensorFlow训练的模型移植到Android手机

    前言 本文中出现的TF皆为TensorFlow的简称 先说两句题外话吧 xff0c TensorFlow 前两天热热闹闹的发布了正式版r1 0 xff0c 可感觉自己才刚刚上手 r0 12 xff0c 这个时代发展的太快 xff0c 脚步是
  • ROS实践手册(一)ROS安装教程

    笔者根据 古月居 ROS入门21讲 学习整理 xff0c 并参考 ROS机器人开发实践 一书 虚拟机安装 注 该部分可参考 古月居 ROS入门21讲 第2讲下载并安装 VMware Workstation Pro下载 Ubuntu18 04
  • Shell系统学习之如何执行Shell程序

    系列文章目录 Shell系统学习之什么是Shell Shell系统学习之创建一个Shell程序 Shell系统学习之向Shell脚本传递参数 Shell系统学习之如何执行Shell程序 Shell系统学习之Shell变量和引用 Shell系
  • target_link_libraries接口的使用

    target link libraries需要放在add executable之后 xff0c 用于指明连接进来的库 xff0c 官方推荐使用这个接口 xff0c 而不推荐使用link libraries xff0c link librar
  • TTL和RS232之间的详细对比

    背景 之前就听过TTL xff0c 一直没搞懂其和RS232的区别 最近 xff0c 打算去买个USB转RS232的芯片 xff0c 结果找到此产品 xff1a 六合一多功能USB转UART串口模块CP2102 usb TTL485 232
  • STL 解算法题目例子

    STL解算法题目例子
  • 双子天蝎,爱情是不老的传说

    双子天蝎 xff0c 爱情是不老的传说 自注 此文章乃双子座所写 定有主观上的个人倾向 转帖者 xff1a 就是我啦 xff0c 一个双子座的帅哥 xff08 自封 xff09 关于双子和天蝎 xff0c 我是很想很完整的写一些 xff0c
  • ASP2.0-130道ASP.NET面试题

    1 简述 private protected public internal 修饰符的访问权限 答 private 私有成员 在类的内部才可以访问 protected 保护成员 xff0c 该类内部和继承类中可以访问 public 公共成员
  • opencv 图像去噪学习总结

    OpenCV图像处理篇之图像平滑 图像平滑算法 程序分析及结果 图像平滑算法 图像平滑与图像模糊是同一概念 xff0c 主要用于图像的去噪 平滑要使用滤波器 xff0c 为不改变图像的相位信息 xff0c 一般使用线性滤波器 xff0c 其
  • Ubuntu18.04 装系统、cuda、cudnn,主要是Ubuntu的内核版本不能太高,亲测很成功

    一 装系统 简单的我就不说了 xff0c 之说要点 1 选择为图形或无线硬件 安装第三方软件 2 在安装类型中 xff0c 选择其他选项 3 分区 xff0c 我选择分区2 3个 EFI分区 xff0c 主空间 xff0c 空间起始位置 x
  • 被透明元素遮挡的元素还可以被点击到吗?

    遮挡 关于是否被遮挡的判断 xff0c 可以从对层叠级别的判断而确定 见 xff1a 说说标准 CSS核心可视化格式模型 visual formatting model 之十三 xff1a 分层的显示 Layered presentatio

随机推荐