• CSS设置字体样式

    目录

    前言：

    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是从父元素中继承字体的设置。

    示例代码如下：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .typeface {
    10.             font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
    11.         }
    12.     style>
    13. head>
    14.  
    15. <body>
    16.     <h1 class="typeface">这设置了font-family属性h1>
    17. body>
    18.  
    19. html>

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

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

    2.font-style：

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

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

    如下是代码的示例：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         body {
    10.             font-style: oblique;
    11.         }
    12.  
    13.         .normal {
    14.             font-style: normal;
    15.         }
    16.  
    17.         .italic {
    18.             font-style: italic;
    19.         }
    20.  
    21.         .oblique {
    22.             font-style: oblique;
    23.         }
    24.  
    25.         .inherit {
    26.             font-style: inherit;
    27.         }
    28.     style>
    29. head>
    30.  
    31. <body>
    32.     只是一段无意义的文本
    33.     <p class="normal">normal：正常的字体。p>
    34.     <p class="italic">italic：显示一个斜体的字体。p>
    35.     <p class="oblique">oblique：显示一个倾斜的字体。p>
    36.     <p class="inherit">inherit：从父元素继承字体的设置。p>
    37. body>
    38.  
    39. 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代码示例如下所示：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .weight-100 {
    10.             font-weight: 100;
    11.         }
    12.  
    13.         .weight-300 {
    14.             font-weight: 300;
    15.         }
    16.  
    17.         .normal {
    18.             font-weight: normal;
    19.         }
    20.  
    21.         .bold {
    22.             font-weight: bold;
    23.         }
    24.  
    25.         .bolder {
    26.             font-weight: bolder;
    27.         }
    28.     style>
    29. head>
    30.  
    31. <body>
    32.     <p class="weight-100">font-weight：100.p>
    33.     <p class="weight-300">font-weight：300.p>
    34.     <p class="normal">font-weight：normal.p>
    35.     <p class="bold">font-weight：bold.p>
    36.     <p class="bolder">font-weight：bolder.p>
    37.  
    38. body>
    39.  
    40. 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属性的示例代码如下：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .normal {
    10.             font-variant: normal;
    11.         }
    12.  
    13.         .small {
    14.             font-variant: small-caps;
    15.         }
    16.     style>
    17. head>
    18.  
    19. <body>
    20.     <p class="normal">This is a paragraphp>
    21.     <p class="small">This is a paragraphp>
    22.  
    23. body>
    24.  
    25. 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-size和font-family这两个属性不可以忽略。
    • font属性里的每个参数只可以设置一个值，除font-size和font-family属性外，被忽略的属性将变成各自的默认值。
    • 如要定义line-height属性，就需要使用斜线/将font-size和line-height属性隔开。

    如下是font的示例代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .font {
    10.             font: oblique 100 12px/30px arial, sans-serif;
    11.         }
    12.     style>
    13. head>
    14.  
    15. <body>
    16.     <p class="font">这是一个font属性的设置。p>
    17. body>
    18.  
    19. html>

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

  • 相关阅读:
    Kubeadm 部署 k8s 集群
    C++ 修饰符类型
    【SQL基础学习】----高级篇(1)
    找出数组中出现偶数次的两个数字
    Scrapy基本概念——Item Pipeline
    C++学习day7
    jmeter 得使用线程租得详细介绍
    ARC110E Shorten ABC
    Web服务详解
    无偏估计和最小方差无偏估计简介
  • 原文地址：https://blog.csdn.net/lh11223326/article/details/137433939