iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >css怎么改变字体粗细
  • 860
分享到

css怎么改变字体粗细

2024-04-02 19:04:59 860人浏览 安东尼
摘要

这篇文章主要为大家展示了“CSS怎么改变字体粗细”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css怎么改变字体粗细”这篇文章吧。

这篇文章主要为大家展示了“CSS怎么改变字体粗细”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css怎么改变字体粗细”这篇文章吧。

在css中,可以使用font-weight属性改变字体粗细,只需要给字体元素设置“font-weight:数值;”。该属性用于设置显示元素的文本中所用的字体加粗。数字值400相当于关键字nORMal,700等价于bold。

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

html中通过添加<b>标记,或者<strong>标记来设置文字的粗细。

CSS可以将文字的粗细进行了细致的划分,而且,还可以将本身是粗体的文字,变为正常的粗细显示。

<html>
  <head>
    <title>文字粗细</title>
    <style>
      h2 span {
        font-weight: lighter;
      }
      span {
        font-size: 30px;
      }
      span.one {
        font-weight: 100;
      }
      span.two {
        font-weight: 200;
      }
      span.three {
        font-weight: 300;
      }
      span.four {
        font-weight: 400;
      }
      span.five {
        font-weight: 500;
      }
      span.sex {
        font-weight: 600;
      }
      span.seven {
        font-weight: 700;
      }
      span.eight {
        font-weight: 800;
      }
      span.nine {
        font-weight: 900;
      }
      span.ten {
        font-weight: bold;
      }
      span.eleven {
        font-weight: normal;
      }
    </style>
  </head>

  <body>
    <h2>文字<span>粗</span>体</h2>
    <span class="one">文字粗细:100</span>
    <span class="two">文字粗细:200</span>
    <span class="three">文字粗细:300</span>
    <span class="four">文字粗细:400</span>
    <span class="five">文字粗细:500</span>
    <span class="six">文字粗细:600</span>
    <span class="seven">文字粗细:700</span>
    <span class="eight">文字粗细:800</span>
    <span class="nine">文字粗细:900</span>
    <span class="ten">文字粗细:bold</span>
    <span class="eleven">文字粗细:normal</span>
  </body>
</html>

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

以上是“css怎么改变字体粗细”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: css怎么改变字体粗细

本文链接: https://www.lsjlt.com/news/75649.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • css怎么改变字体粗细
    这篇文章主要为大家展示了“css怎么改变字体粗细”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css怎么改变字体粗细”这篇文章吧。 ...
    99+
    2024-04-02
  • css中让粗体文字变细
    这篇文章将为大家详细讲解有关css中让粗体文字变细,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 让粗体文字变细,将使用css font-weight实现,字体可否粗体...
    99+
    2024-04-02
  • css如何修改字体粗细
    这篇“css如何修改字体粗细”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“css如何修改字体粗细”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。cs...
    99+
    2023-06-06
  • css怎么让字体加粗
    今天小编给大家分享一下css怎么让字体加粗的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先,在页面中创建两个p标签,并添加...
    99+
    2023-07-04
  • CSS设置字体粗细的方法
    小编给大家分享一下CSS设置字体粗细的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在CSS中,可以通过font-weight属性来设置字体的粗细值;当该属性...
    99+
    2023-06-14
  • css字体怎样加粗
    这篇文章主要讲解了“css字体怎样加粗”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css字体怎样加粗”吧!css字体加粗的方法:首先创建一个HTML示例文件;然后在body中定义一些p标签...
    99+
    2023-06-14
  • css怎么改变字体颜色
    这篇“css怎么改变字体颜色”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css怎么改变字体颜色”文章吧。1.首先,在页面中...
    99+
    2023-07-04
  • CSS怎么实现字体加粗
    本文小编为大家详细介绍“CSS怎么实现字体加粗”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS怎么实现字体加粗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 字体加粗除了...
    99+
    2024-04-02
  • css中怎么给字体加粗
    css 中给字体加粗可以通过 font-weight 属性,默认值 normal,加粗值 bold,还支持更轻(lighter)、更重(bolder)、100-900 数值(400 为正...
    99+
    2024-04-25
    css
  • 怎么用css设置字体加粗
    这篇文章将为大家详细讲解有关怎么用css设置字体加粗,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 css配置字体加粗 css加粗属性单词:font-weight ...
    99+
    2024-04-02
  • css如何让字体加粗
    在css中设置字体加粗的方法:1.创建p标签;2.使用font-weight属性设置字体加粗;在css中设置字体加粗的方法首先,在页面中创建两个p标签,并添加文字用于对比;<!DOCTYPE html><html...
    99+
    2024-04-02
  • css粗体怎么设置
    这篇“css粗体怎么设置”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css粗体怎么设置”文章吧。在CSS中,我们可以使用f...
    99+
    2023-07-06
  • css怎么改变按钮的字体大小
    这篇文章主要介绍“css怎么改变按钮的字体大小”,在日常操作中,相信很多人在css怎么改变按钮的字体大小问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css怎么改变按钮的字体大小”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-04
  • win10字体变粗如何设置
    要将Windows 10的字体加粗,可以按照以下步骤进行设置:1. 打开控制面板。你可以在开始菜单中搜索“控制面板”来找到它。2. ...
    99+
    2023-09-28
    win10
  • html怎么加粗字体
    html加粗字体的方法:首先我们可以使用vscode作为代码编辑器。在vscode中新建一个html文件。在文件中添加html代码架构。<!DOCTYPE html><html>  &n...
    99+
    2024-04-02
  • css如何设置字体粗体效果
    这篇文章主要介绍css如何设置字体粗体效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css设置字体粗体效果的方法是,给字体添加font-weight属性,并将属性值设置为bold或bolder,例如【font-w...
    99+
    2023-06-15
  • css中是通过什么属性来设置字体粗细的
    小编给大家分享一下css中是通过什么属性来设置字体粗细的,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css设置字体粗细的属性是font-weight属性,该属性...
    99+
    2023-06-14
  • css怎么改变p标签的字体大小
    这篇文章主要介绍“css怎么改变p标签的字体大小”,在日常操作中,相信很多人在css怎么改变p标签的字体大小问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css怎么改变p标签的字体大小”的疑惑有所帮助!接下来...
    99+
    2023-07-04
  • css怎么修改字体
    小编给大家分享一下css怎么修改字体,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css修改字体的方法是使用【font-family】规定元素的字体系列,【fon...
    99+
    2023-06-14
  • html怎么给字体加粗
    本篇内容主要讲解“html怎么给字体加粗”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html怎么给字体加粗”吧!html给字体加粗的方法是,给需要设置加粗效果...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作