在html中怎么设置一行字两个不同样式的字体

刺骨的言语ヽ痛彻心扉 2022-08-28 07:50 637阅读 0赞

# Web小结 #

## 1.在html中怎么设置一行字两个不同样式的字体 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3ViZWlMWQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

### 1.使用span标签 ###

*  HTML页面

<!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>首页</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
            <p>
                <span id="zt1">登 </span>
                <span id="zt2">录 </span>
            </p>
    </body>
    </html>

*  CSS页面

p { 
        width: 100%;
        text-align: center;
        font-size: 40px;
        color: #f78215;
    }
    #zt1{ 
        font-family: YouYuan;
    }
    #zt2{ 
        font-family: STCaiyun;
    }

*  效果图

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3ViZWlMWQ_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]

### 2.使用font标签 ###

*  HTML页面

<!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>首页</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
            <p>
                <font id="zt3">你</font>
                <font id="zt4">好</font>
            </p>
    </body>
    </html>

*  CSS页面

p { 
        width: 100%;
        text-align: center;
        font-size: 40px;
        color: #1577f7;
    }
    #zt3{ 
        font-family: STHeiti Light;
    }
    
    #zt4{ 
        font-family: KaiTi;
    }

*  效果图

![在这里插入图片描述][cd4cb78d55514e66b68040afdb8de25a.png_pic_center]

## 2.一些常见中文字体的CSS代码 ##

*  华文细黑：STHeiti Light \[STXihei\]
 *  华文黑体：STHeiti
 *  华文楷体：STKaiti
 *  华文宋体：STSong
 *  华文仿宋：STFangsong
 *  儷黑 Pro：LiHei Pro Medium
 *  儷宋 Pro：LiSong Pro Light
 *  標楷體：BiauKai
 *  蘋果儷中黑：Apple LiGothic Medium
 *  蘋果儷細宋：Apple LiSung Light
 *  新細明體：PMingLiU
 *  細明體：MingLiU
 *  標楷體：DFKai-SB
 *  黑体：SimHei
 *  宋体：SimSun
 *  新宋体：NSimSun
 *  仿宋：FangSong
 *  楷体：KaiTi
 *  仿宋\_ ：GB2312：FangSong\_GB2312
 *  楷体\_ ：GB2312：KaiTi\_GB2312
 *  微軟正黑體：Microsoft JhengHei
 *  微软雅黑体：Microsoft YaHei
 *  隶书：LiSu
 *  幼圆：YouYuan
 *  华文细黑：STXihei
 *  华文楷体：STKaiti
 *  华文宋体：STSong
 *  华文中宋：STZhongsong
 *  华文仿宋：STFangsong
 *  方正舒体：FZShuTi
 *  方正姚体：FZYaoti
 *  华文彩云：STCaiyun
 *  华文琥珀：STHupo
 *  华文隶书：STLiti
 *  华文行楷：STXingkai
 *  华文新魏：STXinwei

## 3.设置视频为HTML页面背景 ##

*  HTML页面

<!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>首页</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    
    <body>
        <video autoplay loop muted>
            <source src="./video/num.mp4" type="video/mp4" />
        </video>
        <div>
            <h1>这是界面</h1>
        </div>
    </body>
    
    </html>

*  CSS页面

* { 
        margin: 0px;
        padding: 0px;
    }
    video { 
        position: fixed;
        right: 0px;
        bottom: 0px;
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        z-index: -11
    }
    source { 
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
    }

*  效果图

![在这里插入图片描述][ae42ed3fccb345fa8767ed4df18d456e.gif_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3ViZWlMWQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/db4f4e66703448b49cf841529d520317.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3ViZWlMWQ_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/851813e20e7e451a9011cb860220d7da.png
[cd4cb78d55514e66b68040afdb8de25a.png_pic_center]: /images/20220828/4d81ad72d4734d988e97e57ee3153de8.png
[ae42ed3fccb345fa8767ed4df18d456e.gif_pic_center]: /images/20220828/e3a9b27eec1d47db965848834c322e19.png