字体样式-CSS入门基础（005）

最新推荐文章于 2024-10-20 17:18:30 发布

虾米大王

最新推荐文章于 2024-10-20 17:18:30 发布

阅读量256

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/modern358/article/details/110942332

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们分享关于字体样式的内容。

在网页开发中，需要优先考虑页面的文字样式属性。包括字体、大小、粗细、颜色等；

CSS字体样式属性
属性值	说明
font-family	字体类型
font-size	字体大小
font-style	字体斜体
color	字体颜色

除了字体颜色以外，其他文字属性都是font前缀开头，可以根据英文意思去记忆，方便很多。

font-family字体类型：

在css中，使用font-family属性定义字体类型。

语法：

font-family:字体1，字体2，字体3；

可以指定多个字体，按照优先顺序，以逗号隔开。

示例代码：

<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-family后面，填写很多字体，这个原因是每个人的电脑安装的字体都不一样，如果你设置的字体，正好登录的电脑没有，那就需要后续的字体来支持。

font-size字体大小：

语法：

font-size: 关键字或者像素值；

font-size属性关键字取值
属性值	说明
xx-small	最小
x-small	较小
small	小
medium	默认值，正常
large	大
x-large	较大
xx-large	最大

以上属性都是相对于浏览器的默认字体大小而言的，大家也不需要记忆，因为在实际开发中，很少用到关键字属性值，一般都是直接采用像素大小来表示的。

示例代码：

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

采用像素px的取值：

在目前国内的主流网站中，大部分都是采用像素px为单位的。那么什么是px呢？

px，全称pixel，像素。px就是图片中最小的点，也是计算机屏幕最小的点，是显示单位。比如一台电脑的显示器分辨率是800 * 600 px，指的就是屏幕宽度800像素，高度600像素，以显示器的分辨率来说，一般windows系统的分辨率为每英寸96px，Mac系统的分辨率是每英寸72px。

示例代码：

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

在css样式中，font-size的单位除了px以外，还有em、百分比等等的方式。对于初学者来说，我们掌握px就基本够用了，等你对css代码了解更多之后，在对这些细节知识点消化吸收。

下节我们继续分享字体的内容。