CSS字体属性

CSS字体属性之字体系列、大小、粗细以及文本样式

字体系列

CSS使用font-family用于定义文本的字体系列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{font-family: "Microsoft YaHei";}div{font-family: "宋体";}</style>
</head>
<body><p>一切都像刚睡醒的样子，欣欣然张开了眼。</P><div>山朗润起来了，水涨起来了，太阳的脸红起来了。</div>
</body>
</html>

运行结果如下所示：

注意：

1.各种字体必须使用英文状态下的逗号进行隔开；

2.一般情况下，如果有空格隔开的多个单词组成的字体，要加引号；

3.尽量使用默认系统自带字体，可以保证用户的任何浏览器打开都能正确的显示；

字体粗细

P{font-weight: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式font-style:normal;
italic	浏览器会显示斜体的字体样式

注意：

通常，我们很少给字体加斜体，反而通常会将斜体的字体改为normal;

字体的符合属性

p{font: font-style font-weight font-size/line-heighr font-family;
}

这时font符合属性的定义，注意有先后顺序，且属性之间用空格隔开，如若顺序错误，浏览器将会不显示任何效果，但是我们可以省略其中的部分属性，但是必须保留font-size 和 font-family 属性，且有先后顺，否则font属性将不显示效果。

字体属性的总结

属性	表示	注意
font-size	字体大小	常用单位为px像素，一定要跟上单位
font-family	字体	实际开发中按照约定来写字体
font-weight	字体粗细	字体加粗是700或者bold；不加粗是400或者normal；记住数字后面不跟单位
font-style	字体样式	倾斜是italic，不倾斜是normal(最常用)
font	符合属性	属性值有顺序，且用空格隔开；字号和字体必须出现

CSS字体属性之字体系列、字体大小、字体粗细、字体样式以及字体的符合属性（基础详解）相关推荐

[系统安全] 四十五.APT系列(10)Metasploit后渗透技术信息收集、权限提权和功能模块详解
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
主线剧情03-NXP-i.MX系列的u-boot移植基础详解
u-boot 移植基础详解本文系广泛撷取.借鉴和整理(相关的内容在网络上有很多,但很多相互抄,或者是版本太老,或者就是不通用的非常有平台针对性的步骤,碎片化泛滥,甚至就是有待分拣的垃圾厂,当然也有一 ...
前端工程师实战开发：CSS样式继承、像素与选择器权重详解
餐厅练习具体看resource文件夹或者百度继承 <body><p>我是p元素<span>我是p里面的span</span></p> ...
CSS入门基础详解——笔记、案例
CSS入门学习一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
浅谈嵌入式MCU软件开发之S32K1xx系列MCU启动过程及重映射代码到RAM中运行方法详解
内容提要注:本文摘自NXP工程师胡恩伟的微信公众号"汽车电子expert成长之路",大家感兴趣可以关注一下. 引言 1. S32K1xx系列MCU启动过程详解(startup_S ...
8天掌握EF的Code First开发系列之3 管理数据库创建，填充种子数据以及LINQ操作详解...
本文出自8天掌握EF的Code First开发系列,经过自己的实践整理出来. 本篇目录管理数据库创建管理数据库连接管理数据库初始化填充种子数据 LINQ to Entities详解什么是LI ...
android相册和拍照并裁剪图片大小,Android 拍照并对照片进行裁剪和压缩实例详解...
Android 拍照并对照片进行裁剪和压缩实例详解本文主要介绍 Android 调用摄像头拍照并对照片进行裁剪和压缩,文中给出了主要步骤和关键代码. 调用摄像头拍照,对拍摄照片进行裁剪,代码如下. ...
iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook详解
代码改变世界 Posts - 69, Articles - 0, Comments - 812 Cnblogs Dashboard Login Home Contact Gallery RSS Ken ...
windowsterminal设置初始大小_这是我见过最全面的金蝶操作详解了，从初始化到财务使用全流程...
今天橘子和小伙伴们分享一套<金蝶操作全流程>,这是我见过最详细的了,从金蝶软件如何安装到有关业务操作详解,非常全面,很适合自学和公司内部培训. 目录一.金蝶KIS专业版产品安装二.金蝶 ...

CSS字体属性之字体系列、字体大小、字体粗细、字体样式以及字体的符合属性（基础详解）

CSS字体属性

字体系列

字体大小

字体粗细

字体的符合属性

字体属性的总结

CSS字体属性之字体系列、字体大小、字体粗细、字体样式以及字体的符合属性（基础详解）相关推荐

最新文章

热门文章