CSS样式表基础(二)——CSS字体

3、CSS 字体

CSS字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

CSS 字体属性:

  • font ————————简写属性。作用是把所有针对字体的属性设置在一个声明中。
  • font-family —————设置字体系列。
  • font-size ——————设置字体的尺寸。
  • font-style ——————设置字体风格。
  • font-weight —————设置字体的粗细。

1) font-family 属性 定义文本的字体系列。

CSS 定义了 5 种通用字体系列:

  1. Serif 字体
  2. Sans-serif 字体
  3. Monospace 字体
  4. Cursive 字体
  5. Fantasy 字体

如果你希望文档使用一种 sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:

body {font-family: sans-serif;}

可以为给定的元素指定一系列的字体,如
font-family: 隶书, 华文行楷;

2) font-style 属性最常用于规定斜体文本。
该属性有三个值:

  1. normal - 文本正常显示
  2. italic - 文本斜体显示
  3. oblique - 文本倾斜显示

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。

3) font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
如:font-weight: bold;

4) font-size 属性设置文本的大小。
font-size 值可以是绝对或相对值。
font-size: 36pt;

例:

<html>
<head>
<meta charset = "utf-8">
<title>CSS</title>
<style>
p {
  color: red;
  font-size: 36pt;
  font-family: 隶书, 华文行楷;
  font-style: italic;
  font-weight: bold;
}
</style>
</head>
<body>
<p>网页设计 第三章 CSS样式表基础</p>
</body>
</html>

图片说明

font 简写属性在一个声明中设置所有字体属性。
可以按顺序设置如下属性:
font-style
font-weight
font-size/line-height
font-family
如:font: italic bold 36pt/40pt 黑体

全部评论

相关推荐

Java面试先知:我也是和你一样的情况,hr 说等开奖就行了
点赞 评论 收藏
分享
来,说点可能被同行“骂”的大实话。🙊当初接数字马力Offer时,朋友都说:“蚂蚁的“内包”公司?你想清楚啊!”但入职快一年后的今天,我反而对他有了不一样的看法!🔹&nbsp;是偏见?还是信息差!之前没入职之前外面都在说什么岗位低人一等这类。实际上:这种情况不可至否,不能保证每个团队都是其乐融融。但我在的部门以及我了解的周边同事都还是十分好相处的~和蚂蚁师兄师姐之间也经常开一些小玩笑。总之:身份是蚂蚁公司给的,地位是自己挣的(一个傲娇女孩的自述)。🔹&nbsp;待遇?玩的就是真实!试用期工资全额发!六点下班跑得快(早9晚6或者早10晚7,动态打卡),公积金顶格交。别听那些画饼的,到手的钱和下班的时间才是真的(都是牛马何必难为牛马)。🔹&nbsp;能不能学到技术?来了就“后悔”!我们拥有权限直通蚂蚁知识库,技术栈多到学不完。说“学不到东西”的人,来了可能后悔——后悔来晚了(哈哈哈哈,可以不学但是不能没有)!💥&nbsp;内推地址:https://app.mokahr.com/su/ueoyhg❗我的内推码:NTA6Nvs走我的内推,可以直达业务部门,面试流程更快速,进度可查!今天新放HC,之前挂过也能再战!秋招已经正式开始啦~机会就摆在这,敢不敢来试一试呢?(和我一样,做个勇敢的女孩)
下午吃泡馍:数字马力的薪资一般哇,5年经验的java/测试就给人一万出头,而且刚入职第三天就让人出差,而且是出半年
帮你内推|数字马力 校招
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务