首页 前端知识 CSS设置字体样式

CSS设置字体样式

2024-04-15 09:04:44 前端知识 前端哥 692 153 我要收藏

目录

前言:

1.font-family:

2.font-style:

3.font-weight:

4.font-size:

5.font-variant:

6.font:


前言:

在网页中字体是重要的组成部分,使用好字体可以让网页更加美观,在CSS中提供了一系列用来设置文本样式的属性,如更改字体,控制字体大小和粗细等等。如下:

font-family:用来设置字体的。

font-style:用来设置字体风格,比如斜体。

font-weight:用来设置字体粗细。

font-size:用来设置字体尺寸。

font-variant:可以将小写字母转换为小型大写字母。

font-stretch:对字体进行伸缩变形(使用较小,并且主流的浏览器都不支持,就不做讲解了)。

font:字体所有属性的缩写,可以在一个声明里面设置多个字体属性。

CSS设置网页颜色-CSDN博客 初识CSS-CSDN博客

1.font-family:

font-family属性是用来设置元素里面的字体,因为字体种类成千上万,有些还要钱,因为我们电脑不可能有所有的字体,所以为了保证我们设置的字体能够正常显示,可以通过font-family属性定义一个由若干字体组成的列表,字体名称之间可以使用逗号,分隔,浏览器会先使用列表里第一个字体,如果不支持就下一个,一直到所有都尝试完之后,如果都不是就使用浏览器默认的字体。font-family的值如下:

说明

family-name,

generic-family

family-name:字体的名称,一个字体名称就表示一种字体,如"宋体"就是字体的种类之一;

generic-family:字体族,就是某种类型的字体组合,一个字体代表一种类型的字体,其中包含很多类似但不同的字体,如"sans-serif"就是一种无衬线字体,其中包含了很重相似的字体。

字体的默认值取决于浏览器的设置。

inherit是从父元素中继承字体的设置。

示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .typeface {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
        }
    </style>
</head>

<body>
    <h1 class="typeface">这设置了font-family属性</h1>
</body>

</html>

在设置字体或者字体族的时候如果其中有多个空格或者多个单词,就需要使用引号将其包裹,如:'Times New Roman'如果元素是在style属性里面使用就必须使用单引号。

代码的运行结果如下所示:

2.font-style:

font-style属性可以用来设置字体的样式,斜体,倾斜等等,如下是其的值:

说明
normal默认值,文本以正常字体样式显示。
italic文本以斜体显示。
oblique文本倾斜显示。
inherit从父元素中继承字体样式。

如下是代码的示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-style: oblique;
        }

        .normal {
            font-style: normal;
        }

        .italic {
            font-style: italic;
        }

        .oblique {
            font-style: oblique;
        }

        .inherit {
            font-style: inherit;
        }
    </style>
</head>

<body>
    只是一段无意义的文本
    <p class="normal">normal:正常的字体。</p>
    <p class="italic">italic:显示一个斜体的字体。</p>
    <p class="oblique">oblique:显示一个倾斜的字体。</p>
    <p class="inherit">inherit:从父元素继承字体的设置。</p>
</body>

</html>

代码的运行结果如下:

 

3.font-weight:

在CSS中font-weight可以设置字体的粗细,其值如下:

说明
normal默认值,标准字体
bold粗体字体。
bolder更粗的字体。
lighter更细的字体。
100,200,300,400,500,600,700,800,900由粗到细的设置字体粗细,100为最细的,400等于normal,700等于bold。
inherit从父元素中继承字体的粗细。

font-weight代码示例如下所示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .weight-100 {
            font-weight: 100;
        }

        .weight-300 {
            font-weight: 300;
        }

        .normal {
            font-weight: normal;
        }

        .bold {
            font-weight: bold;
        }

        .bolder {
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <p class="weight-100">font-weight:100.</p>
    <p class="weight-300">font-weight:300.</p>
    <p class="normal">font-weight:normal.</p>
    <p class="bold">font-weight:bold.</p>
    <p class="bolder">font-weight:bolder.</p>

</body>

</html>

上述代码的运行结果如下所示:

4.font-size:

font-size属性是用来设置字体的大小(字号)的,其值如下:

说明
xx-small,x-smal,small,medium,large,x-large,xx-large以关键字的形式把字体设置为不同的大小,从xx-small到xx-large依次变大,默认值为medium。
smaller为字体设置一个比父元素更小的尺寸。
larger为字体设置一个比父元素更大的尺寸
length以数值加单位的形式把字体设置成为一个固定的尺寸,如18px,2em。
%以百分比的形式给字体设置一个相对于父元素字体的大小。
inherit

从父元素中继承字体的尺寸。

 font-size属性的示例代码如下:

5.font-variant:

font-variant属性可以将文本里面的小写英文字母转换为小型大写字母(转换之前的字母和转换之后的字母大小基本差不多,所以称其为小型大写字母),其值如下:

说明
normal默认值,浏览器会显示一个标准的字体
small-caps将文本中的小写字母转换为小型大写字母。
inherit从父元素里继承font-variant属性的值。

 font-variant属性的示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .normal {
            font-variant: normal;
        }

        .small {
            font-variant: small-caps;
        }
    </style>
</head>

<body>
    <p class="normal">This is a paragraph</p>
    <p class="small">This is a paragraph</p>

</body>

</html>

 上述代码的运行结果如下所示:

6.font:

font属性和之前的background功能类似,通过font属性可以同时设置多个字体的属性,不同的是,使用font需要遵循如下顺序:

font: [[font-style||font-variant||font-weight||font-stretch]?font-size[/line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar

使用font时需要注意:

  • 使用font属性必须按照上述顺序,而且font-sizefont-family这两个属性不可以忽略。
  • font属性里的每个参数只可以设置一个值,除font-sizefont-family属性外,被忽略的属性将变成各自的默认值。
  • 如要定义line-height属性,就需要使用斜线/font-sizeline-height属性隔开。

如下是font的示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .font {
            font: oblique 100 12px/30px arial, sans-serif;
        }
    </style>
</head>

<body>
    <p class="font">这是一个font属性的设置。</p>
</body>

</html>

上述代码的运行结果如下:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4926.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!