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

最新推荐文章于 2024-01-03 15:43:58 发布

杨丙寅

最新推荐文章于 2024-01-03 15:43:58 发布

阅读量7.6k

点赞数 2

分类专栏：技能总结

本文链接：https://blog.csdn.net/m0_46153949/article/details/120609062

版权

HTML CSS 字体视频背景样式

关键词由CSDN通过智能技术生成

技能总结专栏收录该内容

21 篇文章

订阅专栏

Web小结

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

在这里插入图片描述

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;
}

效果图

在这里插入图片描述

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;
}

效果图

在这里插入图片描述

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;
}