零基础CSS入门教程(8)——CSS设置字体

简介: 我们前几个小结学习了,css的选择器,和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能(1)font-size这个是设置字体大小,浏览器一般默认字体是16px(2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold(3)font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal(4)font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了

本章目录

1.任务目标

我们前几个小结学习了,css的选择器,和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能

2.css设置字体

(1)font-size这个是设置字体大小,浏览器一般默认字体是16px

(2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold

(3)font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal

(4)font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了要是电脑没安装字体他就可以随机给你定义一个无衬线字体,还有serif有衬线字体和monosspace等宽字体

3.代码演示

<!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>Document</title>
    <style>
div{
    /* font-size这个是设置字体大小,浏览器一般默认字体是16px   */
    font-size: 20px;
    /* font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold*/
    font-weight: 700;
    /*font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal*/
    font-style: italic;
    /*font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了要是电脑没安装字体他就可以随机给你定义一个无衬线字体,还有serif有衬线字体和monosspace等宽字体*/
    font-family: 宋体,黑体, sans-serif;
}
    </style>
</head>
<body>
    <div>你好啊</div>
</body>
</html>

效果如下

4.小结

我们本小结学习了如何设置字体,再css里面设置字体很常用的,我们要熟练使用。

相关文章
|
25天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
1月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
14天前
|
前端开发 JavaScript UED
|
1月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
22 4
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
52 2
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
66 28
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
27 5
|
3月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
3月前
|
前端开发
CSS 设置hr样式
【8月更文挑战第9天】