当前位置: 首页 > news >正文

[CSS]CSS 字体属性

请添加图片描述

文章目录

    • 1 字体系列
    • 2 字体大小
    • 3 字体粗细
    • 4 文字样式
    • 5 字体复合属性
    • 6 字体属性总结


CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)

1 字体系列

CSS 使用 font-family 属性定义文本的字体系列。可以设置一种或多种字体。

  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
  • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
  • 最常见的几个字体:body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
<!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>
    h1 {
      font-family: 'Courier New', Courier, monospace;
    }
  </style>
</head>
<body>
  <h1>字体系列 font-family</h1>
</body>
</html>

font-family: ‘Courier New’, Courier, monospace;
电脑浏览器中有 ‘Courier New’ 字体就使用该字体,没有则使用 Courier ,再没有使用 monospace,都没有就是要电脑浏览器默认的字体

在这里插入图片描述

2 字体大小

CSS 使用 font-size 属性定义字体大小

<!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>
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>字体大小</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</div>
</body>
</html>

在这里插入图片描述

  • px(像素)大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
  • 可以给 body 指定整个页面文字的大小
<!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>
    body {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>字体大小</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</div>
</body>
</html>

在这里插入图片描述

会发现通过给body设置字体大小来设置整个页面的字体大小,h1 的字体大小并没有发生改变

标题标签比较特殊,需要单独指定文字大小

  <style>
    body {
      font-size: 20px;
    }
    h1 {
      font-size: 20px;
    }
  </style>

在这里插入图片描述

3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

font-weight 的取值:

  • normal:文字正常粗细
  • bold:文字加粗
  • bolder:文字特粗(效果不是很明显)
  • lighter:文字细体(效果不是很明显)
  • 数值:100、200、300、400(等价于normal)、500、600、700(等价于bold)、800、900

400 以下细体,700以上特粗。
默认值:normal

注意:

  • 数值后面不要带单位
  • 实际开发时,我们更喜欢用数字表示粗细
<!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>
    .normal {
      font-weight: normal;
    }
    .bold {
      font-weight: bold;
    }
    .bolder {
      font-weight: bolder;
    }
    .lighter {
      font-weight: lighter;
    }
    .one {
      font-weight: 100;
    }
    .two {
      font-weight: 200;
    }
    .three {
      font-weight: 300;
    }
    .four {
      font-weight: 400;
    }
    .five {
      font-weight: 500;
    }
    .six {
      font-weight: 600;
    }
    .seven {
      font-weight: 700;
    }
    .eight {
      font-weight: 800;
    }
    .nine {
      font-weight: 900;
    }
  </style>
</head>
<body>
  <p class="normal">文字正常粗细</p>
  <p class="bold">文字加粗</p>
  <p class="bolder">文字特细</p>
  <p class="lighter">文字细体</p>
  <p class="one">文字 100</p>
  <p class="two">文字 200</p>
  <p class="three">文字 300</p>
  <p class="four">文字 400</p>
  <p class="five">文字 500</p>
  <p class="six">文字 600</p>
  <p class="seven">文字 700</p>
  <p class="eight">文字 800</p>
  <p class="nine">文字 900</p>
</body>
</html>

在这里插入图片描述

把本来加粗的文本设置为正常出细

  <h1 class="h1-normal">文章标题</h1>
  <h1>文章标题-未加粗</h1>
    .h1-normal {
      font-weight: normal;
      /* 或 */
      /* font-weight: 400; */
    }

在这里插入图片描述

4 文字样式

CSS 使用 font-style 属性设置文本的风格。

font-style取值:

  • normal: 文本字体样式为正常的字体。
  • italic: 文本字体样式为斜体。

默认值:normal

<body>
  <p class="normal">正常样式的字体</p>
  <p class="italic">斜体样式的字体</p>
</body>
  <style>
    .normal {
      font-style: normal;
    }

    .italic {
      font-style: italic;
    }
  </style>

在这里插入图片描述

注意:
平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。

  <em class="normal">倾斜的文本改为正常样式的字体</em>
  <i class="normal">倾斜的文本改为正常样式的字体</i>
    .normal {
      font-style: normal;
    }

在这里插入图片描述

5 字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码(行数更少)

使用 font 属性可以把以上文字样式综合来写

使用 font 属性时,必须按语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开

font: font-style font-weight font-size/line-height font-family;
  • font-style:文字样式
  • font-weight:文字粗细
  • font-size:文字大小
  • line-height:文字行高
  • font-family:文字字体

其中,不想设置的属性可以省略不写,但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用

<body>
  <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quas magni molestias molestiae praesentium quo dolor ullam odio nulla! Dicta quos asperiores ducimus eligendi doloremque fugiat dolorum aperiam earum nulla?</div>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet quam quod porro in consequuntur at fugiat debitis, consequatur dolores facere! Quia aliquam recusandae tenetur, quam natus libero quaerat impedit rerum?</p>
  <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem animi sunt fuga enim temporibus tempore, optio unde quos eligendi. Laboriosam, maxime consequuntur dolore non itaque officiis maiores magnam rerum voluptatibus.</span>
</body>
  <style>
    div {
      font: italic 700 20px '微软雅黑';
    }

    p {
      font: italic 700;
    }

    h4 {
      font: italic 20px 700 '微软雅黑';
    }
  </style>

在这里插入图片描述

6 字体属性总结

在这里插入图片描述

相关文章:

  • CSDN编程竞赛,让更多的人学会编程
  • 测试团队技术转型实践方法
  • 类和对象·引入
  • Java 数据结构 ---》 泛型
  • 模型部署——融合BN和Conv层
  • 美化你的Xfce桌面
  • 【.Net实用方法总结】 整理并总结System.IO中BufferedStream类及其方法介绍
  • Android移动应用开发之TextView实现阴影跑马灯文字效果
  • MySQL是怎样运行的:从根儿上理解MySQL | 查询优化器(二):基于规则的优化
  • 数据分享|WEKA用决策树、随机森林、支持向量机SVM、朴素贝叶斯、逻辑回归信贷违约预测报告
  • JavaSE学习----(八)常用类之Stirng类
  • 跨境电商自养号测评补单+广告结合打法,打造爆款产品
  • 01_中间件
  • 记录QUME上模拟ARM运行环境(内核 2.6.30)
  • JavaWeb开发之——MySQL数据模型(04)
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • Apache Spark Streaming 使用实例
  • emacs初体验
  • js学习笔记
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • Spring-boot 启动时碰到的错误
  • supervisor 永不挂掉的进程 安装以及使用
  • SwizzleMethod 黑魔法
  • 类orAPI - 收藏集 - 掘金
  • 力扣(LeetCode)56
  • 如何解决微信端直接跳WAP端
  • 入手阿里云新服务器的部署NODE
  • 深入浏览器事件循环的本质
  • 深入体验bash on windows,在windows上搭建原生的linux开发环境,酷!
  • 使用 5W1H 写出高可读的 Git Commit Message
  • 使用SAX解析XML
  • 积累各种好的链接
  • 你学不懂C语言,是因为不懂编写C程序的7个步骤 ...
  • 新年再起“裁员潮”,“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • ​卜东波研究员:高观点下的少儿计算思维
  • (1)Nginx简介和安装教程
  • (5)STL算法之复制
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • (黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
  • (三)uboot源码分析
  • (转载)hibernate缓存
  • .L0CK3D来袭:如何保护您的数据免受致命攻击
  • .NET Conf 2023 回顾 – 庆祝社区、创新和 .NET 8 的发布
  • .NET 事件模型教程(二)
  • ::before和::after 常见的用法
  • @Controller和@RestController的区别?
  • @entity 不限字节长度的类型_一文读懂Redis常见对象类型的底层数据结构
  • @LoadBalanced 和 @RefreshScope 同时使用,负载均衡失效分析
  • @RequestBody详解:用于获取请求体中的Json格式参数
  • @Transaction注解失效的几种场景(附有示例代码)
  • [100天算法】-实现 strStr()(day 52)
  • [Android Pro] android 混淆文件project.properties和proguard-project.txt