学习htmlcss怎么去思考(测试开发全栈化-HTML)
今天讲下HTML中,CSS样式里的字体属性。CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)。
字体系列:
CSS中使用font-family 属性定义文本的字体系列。语法如下:
p {
font-family: "微软雅黑";
}
<div font-family: Arial,"Microsoft Yahei","微软雅黑";></div>
我们来看个实例:
可以看到将标题进行了字体设置,来看下具体的代码:
<!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>CSS字体属性之字体系列</title>
<!--对h2修改下字体-->
<style>
h2 {
font-family: "宋体";
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有,把酒问青天</p>
<p>不知天上宫阙,今夕是何年</p>
<p>我欲乘风归去,又恐琼楼玉宇</p>
<p>高处不胜寒,起舞弄清影,何似在人间。</p>
</body>
</html>
其中
<style>
h2 {
font-family: "宋体";
}
</style>
就是设置字体的地方
尝试修改为另外一种字体,如微软雅黑,让我们看看效果
具体对应的代码为:
<style>
h2 {
font-family: "微软雅黑";
}
</style>
还可以用两个字体,效果如下:
对应的代码为:
<!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>CSS字体属性之字体系列</title>
<!--对h2修改下字体-->
<style>
h2 {
font-family: "微软雅黑";
}
p {
font-family: "宋体";
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有,把酒问青天</p>
<p>不知天上宫阙,今夕是何年</p>
<p>我欲乘风归去,又恐琼楼玉宇</p>
<p>高处不胜寒,起舞弄清影,何似在人间。</p>
</body>
</html>
建议不要直接使用中文,最好使用英文,微软雅黑对应的是 Microsoft YaHei
我们替换后试下:
字体没变,还是一样,但是代码变了
<style>
h2 {
font-family: "Microsoft YaHei";
}
p {
font-family: "宋体";
}
</style>
不仅可以写一个字体,还可以写多个字体,之间用空格隔开。各种字体之间必须使用英文的逗号符号。一般情况下,如果有空格隔开的多个单词组成的字体,需要加引号。尽量使用系统自带的默认字体,保证在任何用户的浏览器中能够正常显示。
写多个字体的好处就是:
当浏览器运行并调用字体代码时,会按照顺序先查看第一个字体,如果系统中没有,会自动调用第二个字体,直到找到匹配的字体。
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com