零基础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里面设置字体很常用的,我们要熟练使用。

相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
32 0
|
2月前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
3月前
|
前端开发
|
7天前
|
前端开发
css怎样设置下滑线?
css怎样设置下滑线?
|
18天前
CSS3设置圆角化
CSS3设置圆角化
|
3月前
|
前端开发
让页面里的字体变清晰,变细用CSS怎么做?
让页面里的字体变清晰,变细用CSS怎么做?
47 2
|
3月前
|
Web App开发 前端开发
CSS:字体和文本样式
CSS:字体和文本样式
39 0
|
4月前
|
前端开发 JavaScript 容器
纯css实现高度或者宽度变化字体发生变化【容器查询】
纯css实现高度或者宽度变化字体发生变化【容器查询】
59 0
|
4月前
|
JavaScript 前端开发
CSS3 transform 字体模糊问题
CSS3 transform 字体模糊问题
|
4月前
|
前端开发
CSS 字体对齐
CSS 字体对齐