CSS如何设置字体粗细

在CSS中,可以通过font-weight属性来设置字体粗细;当该属性的值设置为“lighter”时是细体样式,值为“normal”时是正常粗细,值为“bold”时是粗体样式,值为“bolder”时是特粗体样式。

CSS如何设置字体粗细

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS可以将文字的粗细进行了细致的划分,而且,还可以将本身是粗体的文字,变为正常的粗细显示。文字的粗细在CSS中通过属性:font-weight设置,如上代码几乎涵盖了所有的文字粗细值,并且,可以是本身是粗体的字体,变成正常粗体。如:

.lighter {    font-weight: lighter;}.normal {    font-weight: normal;}.bold {    font-weight: bold;}.bolder {    font-weight: bolder;}

字体粗细: lighter

字体粗细: normal

字体粗细: bold

字体粗细: bolder

上述代码定义了 4 种不同粗细的字体,按顺序依次变粗。运行结果如图 

font-weight属性效果

立即学习“前端免费学习笔记(深入)”;

为了实现更细致的控制,CSS也允许使用数字来设置字体的粗细。数字必须是100的整数倍,取值在100~900 之间,值越大字体越粗。400 等同于 normal,700 等同于 bold。不同取值的结果如图 

font-weight属性值对照表

浏览器会自动为一些元素(如,strong、h1~h6 和b)添加粗体格式,有些元素还继承了父元素粗体格式,可以通过 font-weight: normal 来取消这些元素的粗体格式。

推荐学习:《css视频教程》

以上就是CSS如何设置字体粗细的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1618908.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 06:26:37
下一篇 2025年12月24日 06:26:54

相关推荐

  • 常见的css框架有哪些

    常见css框架:1、Bootstrap框架;2、Foundation框架,一个专业的前端框架;3、Pure框架,优点是渲染快;4、Skeleton框架;5、99lime HTML KickStart框架,适合网站快速开发;6、Kube框架。 本教程操作环境:windows7系统、CSS3版、Dell…

    2025年12月24日 好文分享
    000
  • CSS如何使用精灵图

    CSS使用精灵图的方法:首先使用background-image属性导入精灵图;然后利用background-repeat:no-repeat设置图像不重复;最后使用background-position属性设置图像初始位置,进行精确定位。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css怎么设置显示隐藏动画

    css设置显示隐藏动画的方法:首先创建一个HTML示例文件;然后创建一个标签,并设置一些文字;最后使用“@-webkit-keyframes”对fadenum类设置淡出淡入效果即可。 保存html代码后使用浏览器打开即可看到设置 样式显示效果。 添加淡出淡入动画效果。使用@-webkit-keyfr…

    2025年12月24日 好文分享
    000
  • css怎么让图片不变形

    css让图片不变形的实现方法:首先创建一个HTML示例文件;然后在body中添加img标签并引入图片;最后通过设置“max-height”或者“max-width”属性来实现图片不变形即可。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。 如果想要…

    2025年12月24日
    000
  • css改变滚动条样式

    css改变滚动条样式的方法:1、通过“-webkit-scrollbar”属性设置滚动条整体部分;2、通过“-webkit-scrollbar-button”属性设置滚动条两端的按钮等等。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。 因为在现在…

    2025年12月24日
    000
  • css按钮的大小设置

    css按钮的大小设置方法:首先创建一个HTML示例文件;然后在body中通过button标签创建一个按钮;最后使用“font-size”属性来设置按钮大小即可。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。 可以使用 font-size 属性来设…

    2025年12月24日 好文分享
    000
  • css怎么让高度自适应

    css让高度自适应的方法:1、把父层高度设置成“height:auto;”样式属性;2、给添加父层添加“overflow:hidden;”样式属性,然后新建一个div放在后面,并添加样式属性“clear:both”即可。 本文操作环境:windows7系统、HTML5&&CSS3&a…

    2025年12月24日 好文分享
    000
  • 十一款学CSS小游戏,你知道几个

    本文通过给大家介绍十一款学习css的小游戏。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 网上有很多有助于学习CSS的游戏,本文收集了一些非常实用的免费CSS游戏,希望这些游戏可以帮助你再次体验CSS的乐趣! 我必须承认,我的记性不是很好。特别是我记不住CSS,例如Flexbox…

    2025年12月24日 好文分享
    000
  • 如何使用内嵌式引入css样式表

    引入方法:将CSS代码集中写在HTML文档的“”头部标签中,并且用“”标签定义;语法格式为“选择器 {属性:属性值;}”。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在ht…

    2025年12月24日
    000
  • css如何做三角形

    css做三角形的方法:首先创建一个div元素,设置div的width和height为0,只用边框宽来填充,边框样式设置为实线“solid”;然后顶部边框设置颜色,剩下的三个边框的颜色设置为透明“transparent”值即可。 本教程操作环境:windows7系统、CSS3&&HTM…

    2025年12月24日 好文分享
    000
  • css怎么设置元素高度为20px

    在css中,可以使用height属性来给元素设置高度,只需要给元素添加“height:20px;”样式即可设置元素的高度为“20px”。height属性用于设置元素的高度,这个属性定义元素内容区的高度,行内非替换元素会忽略这个属性。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css怎样把一张图片分割开

    css把一张图片分割开的方法:1、利用background-image和background-position属性来分割图片;2、利用clip属性,通过给img图片元素设置“clip:rect(y1,y2,x2,x1);”样式来分割图片。 本教程操作环境:windows7系统、CSS3&&a…

    2025年12月24日 好文分享
    000
  • css有超文本标记选择器吗

    css中没有“超文本标记选择器”;css包含的选择器有:id选择器、class选择器、标签选择器、后代选择器、子选择器、伪类选择器、伪元素选择器、通用选择器“*”、属性选择器、群组选择器、相邻同胞选择器。 本教程操作环境:windows7系统、CSS3版、Dell G3电脑。 css选择器介绍: 1…

    2025年12月24日
    000
  • css图片如何设置上边框距离

    在css中,可以使用padding-top属性来设置图片的上边框距离,只需要给图片元素添加“padding-top:距离值;”样式即可。padding-top属性可以设置元素的上内边距(空间),不允许使用负值。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell…

    2025年12月24日
    000
  • css中skew是什么意思

    skew的意思为“倾斜”,是css中的内置函数,需与transform属性一起使用,用于元素的倾斜转换。css中有3种skew:“skew(x-角度,y-角度)”沿着X和Y轴的倾斜转换,“skewX(角度)”或“skewY(角度)”。 本教程操作环境:windows7系统、CSS3&&amp…

    2025年12月24日 好文分享
    000
  • CSS元素垂直居中

        css让人头疼的问题就是垂直居中。实现垂直居中好几种方式,但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。 1.容器里面的内容只有一行文字 * { padding: 0; margin: 0; } div { height: 60px; background-colo…

    2025年12月24日
    000
  • css怎么用三种方法设置透明度

    方法:1、给元素添加“background-color:rgba(R,G,B,A)”样式来设置颜色透明度;2、给元素添加“opacity:透明值;”样式来设置透明度;3、给图像设置“filter:opacity(%);”样式来透明度。 本教程操作环境:windows7系统、CSS3&&amp…

    2025年12月24日 好文分享
    000
  • css怎么设置扇形区域

    在css中,可以利用border-radius属性来设置扇形区域。border-radius属性可以设置边框四个角的圆角;只需要将border-radius属性一个角的值设置与宽高相同,其他几个角的值设为“0”即可实现一个简单的扇形。 本教程操作环境:windows7系统、CSS3&&amp…

    2025年12月24日
    000
  • css表格怎么设置中间对齐

    在css中,可以通过给表格table元素设置“margin:auto;”样式来让表格中间对齐。该样式给一个元素的左外边距和右外边距赋予同样的auto值,那么这个元素的左、右外边距就会平分所占据的可用空间,因此我们会看到在元素表现水平居中。 本教程操作环境:windows7系统、CSS3&&a…

    2025年12月24日
    000
  • css可以使用变量吗

    css可以使用变量。在css中,变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值;使用自定义属性来设置变量名,并使用var()函数来读取。 本教程操作环境:windows7系统、CSS3版、Dell G3电脑。 CSS 变量当前有两种形式: 变量,就是拥有合法标识符和合法的值。可…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信