今天我们分享关于字体样式的内容。在网页开发中,需要优先考虑页面的文字样式属性。包括字体、大小、粗细、颜色等;
CSS字体样式属性 | |
属性值 | 说明 |
font-family | 字体类型 |
font-size | 字体大小 |
font-style | 字体斜体 |
color | 字体颜色 |
font-family:字体1,字体2,字体3;
可以指定多个字体,按照优先顺序,以逗号隔开。示例代码:很多时候,我们会在font-family后面,填写很多字体,这个原因是每个人的电脑安装的字体都不一样,如果你设置的字体,正好登录的电脑没有,那就需要后续的字体来支持。font-size字体大小:语法:<html>
<head>
<title>字体类型</title>
<style type="text/css">
#p1
{
font-family:宋体;
}
#p2
{
font-family:微软雅黑;
}
</style>
</head>
<body>
<p id="p1">我是宋体</p>
<p id="p2">我是微软雅黑</p>
</body>
</html>
font-size: 关键字或者像素值;
font-size属性关键字取值 | |
属性值 | 说明 |
xx-small | 最小 |
x-small | 较小 |
small | 小 |
medium | 默认值,正常 |
large | 大 |
x-large | 较大 |
xx-large | 最大 |
采用像素px的取值:在目前国内的主流网站中,大部分都是采用像素px为单位的。那么什么是px呢?px,全称pixel,像素。px就是图片中最小的点,也是计算机屏幕最小的点,是显示单位。比如一台电脑的显示器分辨率是800 * 600 px,指的就是屏幕宽度800像素,高度600像素,以显示器的分辨率来说,一般windows系统的分辨率为每英寸96px,Mac系统的分辨率是每英寸72px。示例代码:<html>
<head>
<title>字体大小</title>
<style type="text/css">
#p1
{
font-size: small;
}
#p2
{
font-size: medium;
}
#p3
{
font-size:large;
}
</style>
</head>
<body>
<p id="p1">我是small字体</p>
<p id="p2">我是medium字体</p>
<p id="p3">我是large字体</p>
</body>
</html>
在css样式中,font-size的单位除了px以外,还有em、百分比等等的方式。对于初学者来说,我们掌握px就基本够用了,等你对css代码了解更多之后,在对这些细节知识点消化吸收。下节我们继续分享字体的内容。<html>
<head>
<title>字体大小像素取值</title>
<style>
#p1 { font-size:10px;}
#p2 { font-size:15px;}
#p3 { font-size:20px;}
</style>
</head>
<body>
<p id="p1">字体大小为10px</p>
<p id="p2">字体大小为15px</p>
<p id="p3">字体大小为20px</p>
</body>
</html>