在html中怎么设置⼀⾏字两个不同样式的字体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">
100种不同的字体</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;
}
效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。