整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「测试开发全栈-HTML」(9)css字体属性之字体粗细和样式

天说了CSS字体属性的大小,font-family, 今天我们来一起学习下字体属性的字体粗细 font-weight

还是使用昨天的那首诗,让诗句中的最后一句显示粗体,看下效果:

可以看到最后一句显示粗体了,我们来查看下对应的代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS字体属性之字体粗细和样式</title>

<style>

.bold {

font-weight:bold;

}

</style>

</head>

<body>

<h2>明月几时有</h2>

<p>明月几时有,把酒问青天</p>

<p>不知天上宫阙,今夕是何年</p>

<p>我欲乘风归去,又恐琼楼玉宇</p>

<p>高处不胜寒,起舞弄清影,何似在人间。</p>

<p>人有悲欢离合,月有阴晴圆缺,此事古难全</p>

<p class="bold">但愿人长久,千里共婵娟。</p>

</body>

</html>


字体粗细中的参数包括: normal | bold | bolder | lighter | number(自定义)

我们来试试lighter和number自定义吧

可以看到红框的字体都已经设置好了,对应的代码为:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS字体属性之字体粗细和样式</title>

<style>

.bold {

font-weight:bold;

}


.lighter {

font-weight:lighter;

}


.number {

font-weight: 900;

}

</style>

</head>

<body>

<h2>明月几时有</h2>

<p class="lighter">明月几时有,把酒问青天</p>

<p>不知天上宫阙,今夕是何年</p>

<p class="number">我欲乘风归去,又恐琼楼玉宇</p>

<p>高处不胜寒,起舞弄清影,何似在人间。</p>

<p>人有悲欢离合,月有阴晴圆缺,此事古难全</p>

<p class="bold">但愿人长久,千里共婵娟。</p>

</body>

</html>

这里需要记住的一点,number自定义数字后不需要加上px


那么是否可以对标题的字体进行粗细设置呢?

答案是可以的,一起来看下

可以看到标题中的字体变为正常的了,对应的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS字体属性之字体粗细和样式</title>

<style>

.bold {

font-weight:bold;

}


.lighter {

font-weight:lighter;

}


.number {

font-weight: 900;

}


h2 {

font-weight: normal;

}

</style>

</head>

<body>

<h2>明月几时有</h2>

<p class="lighter">明月几时有,把酒问青天</p>

<p>不知天上宫阙,今夕是何年</p>

<p class="number">我欲乘风归去,又恐琼楼玉宇</p>

<p>高处不胜寒,起舞弄清影,何似在人间。</p>

<p>人有悲欢离合,月有阴晴圆缺,此事古难全</p>

<p class="bold">但愿人长久,千里共婵娟。</p>

</body>

</html>

加上了对h2的字体设置


好的,今天就是我们对字体粗细的学习,大家加油,十一马上就要结束了,88

ont 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写,或将元素的字体设置为系统字体。

字体修改

  • font-family 属性:设置HTML页面中的字体
  • font-size 属性:设置字体大小
  • font-weight 属性:设置字体的粗细程度
  • font-style 属性:设置指定字体样式

font-family写法示例:

 <style>
         p{
             font-family: "幼圆";
         }
     </style>
 </head>
 <body>
     <p>19级启嘉班</p>
 </body>

效果:

家好,我是大澈!

本文约 800+ 字,整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享一段优质 CSS 代码片段,实现 CSS 文字镂空的效果

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css文字镂空</title>
    <style>
      div {
        margin: 10% auto;
        font-size: 60px;
        font-weight: bold;
        text-align: center;
        /*字体粗细*/
        -webkit-text-stroke: 1px red;
        /*描边*/
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <div>文字镂空</div>
  </body>
</html> 

分享原因

这段代码展示了如何使用 CSS 为文本添加描边效果和透明填充颜色,从而实现有趣的文字镂空视觉效果。

它展示了现代 CSS 特性的使用,让我们使用几行代码,就可以轻松实现较复杂的样式效果。

在项目中确实可能会用到,到时候直接来CV即可。

我越来越觉得,CSS真的是 yyds !

代码解析

1. margin: 10% auto;

将元素的上下边距设置为父元素高度的10%,左右边距自动,这样可以将元素在水平方向居中,在垂直方向看着也比较舒服。

2. -webkit-text-stroke: 1px red;

为文本添加1像素宽的红色描边。

-webkit-text-stroke 是一个非标准的 CSS 属性,用于在 WebKit 内核浏览器中为文本添加描边效果。

它由两个部分组成:描边的宽度和描边的颜色。这个属性可以创建一些特别的视觉效果,如在黑色背景上用白色描边的文字等。

这是一个 WebKit 特性,所以带有 -webkit- 前缀。此属性在支持 WebKit 内核的浏览器中有效,例如 Chrome 和 Safari。

3. -webkit-text-fill-color: transparent;

将文本的填充颜色设置为透明。

-webkit-text-fill-color 也是一个非标准的 CSS 属性,用于在 WebKit 内核浏览器中设置文本的填充颜色。

这个属性与标准的 color 属性类似,但它的设计目的是与 -webkit-text-stroke 一起使用,以提供更高级的文本样式。

这同样是一个 WebKit 特性。

- end -