位置: IT常识 - 正文

【CSS】CSS字体样式【CSS基础知识详解】(css中字体样式设置)

编辑:rootadmin
【CSS】CSS字体样式【CSS基础知识详解】

推荐整理分享【CSS】CSS字体样式【CSS基础知识详解】(css中字体样式设置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css字体样式代码大全,css字体样式怎么写,css字体样式代码大全,css字体样式怎么写,字体css样式,css如何设置字体样式,css字体样式代码大全,css样式字体设置,内容如对您有帮助,希望把文章链接给更多的朋友!

👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创

本文章收录于专栏 【CSS】

【CSS专栏】已发布文章

📁【CSS基础认知】 📁【CSS选择器全解指南】

本文目录【CSS字体样式】🌙CSS字体认知🌙字型🌸Serif 和 Sans-serif 字体🌸font-family属性🌙字体样式🌙字体大小🌙字体粗细🌙小型大写字母字体🌙字体复合属性🌙CSS字体认知

文字是网页界面上最常见的元素,而文字的字体、大小和文字样式等都可以通过CSS来设置。

🌙字型

在 CSS 中,有五个通用字型:

衬线字体(Serif)- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感

特点:文字笔画粗细不均匀,并且首尾有笔锋装饰

场景:报刊书籍中应用广泛

常见该系列字体:宋体、Times New Roman

无衬线字体(Sans-serif)- 字体线条简洁(没有小笔画)。它们营造出现代而简约的外观。

特点:文字笔画粗细均匀,并且首尾无修饰

场景:网页中大多采用无衬线字体

常见该系列字体:黑体、Arial

等宽字体(Monospace)- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。

特点:每个字母或文字的宽度相等

场景:一般用于程序代码编写,有利于代码的阅读和编写

常见该系列字体:Consolas、fira code

草书字体(Cursive)- 模仿了人类的笔迹。

幻想字体(Fantasy)- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

🌸Serif 和 Sans-serif 字体

在计算机屏幕上,sans-serif字体被认为比serif字体容易阅读

一些字体的例子:

通用字型字体名称实例SerifTimes New Roman Georgia GaramondSans-serifArial Verdana HelveticaMonospaceCourier New Lucida Console MonacoCursiveBrush Script MT Lucida HandwritingFantasyCopperplate Papyrus🌸font-family属性

在CSS中,我们使用font-family属性规定文本的字体。

通常 font-family 属性应该设置多个值,以保证当浏览器不支持第一种字体时使用其他的备选字体。

【CSS】CSS字体样式【CSS基础知识详解】(css中字体样式设置)

注意: 如果字体系列的名称超过一个字,它必须用引号,如 font family:“宋体”。

多个字体系列用一个逗号分隔指明。

例如:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>花无缺</title> <style> /*设置段落p的字体为楷体,如果浏览器不支持则采用宋体,依次类推*/ p { font-family: "楷体", "宋体",serif; } /*设置div的字体为隶书,如果不支持隶书,则采用浏览器默认字体*/ div { font-family: "隶书"; } </style></head><body> <p> 通常font-family属性应该设置多个值,以保证当浏览器不支持第一种字体时使用其他的备选字体。 </p> <div> 如果字体系列的名称超过一个字,它必须用引号,如font family:"宋体"。 多个字体系列是用一个逗号分隔指明。 </div></body></html>

🌙字体样式

属性名:font-style

作用:用于指定斜体文本

取值:

normal - 文字正常显示italic - 文本以斜体显示oblique - 文本为“倾斜”(倾斜与斜体非常相似,但支持较少)

例如:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>花无缺</title> <style> p { font-style: normal; } div { font-style: italic; } span { font-style: oblique; } </style></head><body> <p>字体样式</p> <div>字体样式</div> <span>字体样式</span></body></html>

🌙字体大小

属性:font-size

作用:设置字体的大小

取值:

取值效果xx-small/x-small/small/medium/large/x-large/xx-large把字体的尺寸设置成相对于父元素不同的尺寸,从xx-small到xx-large 默认值:medium。smaller把 font-size 设置为比父元素更小的尺寸larger把 font-size 设置为比父元素更大的尺寸px/cm/pt/in/mm把 font-size 设置为一个固定的尺寸%把 font-size 设置为基于父元素的一个百分比的大小inherit从父元素继承em1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=emrem1rem = 1HTML字号大小

例如:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>花无缺</title> <style> body { color: blue; } .text2 { font-size: 30px; } .text3 { font-size: 2em; } .text4 { font-size: larger; } .text5 { font-size: 50%; } </style></head><body> <p class="text1">花无缺,这是浏览器默认字体大小</p> <p class="text2">这是使用px设置的字体大小,大小为30px</p> <p class="text3">这是使用em设置的字体大小,大小为2em,相当于32px</p> <p class="text4">这是使用small设置的字体大小</p> <p class="text5">这是使用百分比设置的字体大小,是父元素body16px的50%,相当于8px</p></body></html>

🌙字体粗细

属性名:font-weight

作用:设置字体的粗细

取值:

值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100 200 300 400 500 600 700 800 900定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。inherit规定应该从父元素继承字体的粗细。

例如:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>花无缺</title> <style> .text1 { font-weight: bold; } .text2 { font-weight: lighter; } .text3 { font-weight: 900; } </style></head><body> <p class="text1">字体粗细</p> <p class="text2">字体粗细</p> <p class="text3">字体粗细</p> <!-- <p class="text4">字体粗细</p> --></body></html>

注意:

不是所有字体都提供九种粗细,因此部分取值页面中无变化🌙小型大写字母字体

属性名:font-variant

作用:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小

取值:

值描述normal默认值。浏览器会显示一个标准的字体。small-caps浏览器会显示小型大写字母的字体。inherit规定应该从父元素继承 font-variant 属性的值。

例如:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>花无缺</title> <style> .nomal { font-variant: normal; } .small { font-variant: small-caps; } </style></head><body> <p class="nomal">This is a article.</p> <p class="small">This is a article.</p></body></html>

🌙字体复合属性

属性名:font 作用:将字体的各种属性写在一起

取值:font:style weight size family;

例如:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>花无缺</title> <style> /*将div的字体设置为斜体,粗细为700,大小为20px,字体为华文楷体*/ div { font: italic 700 20px 华文楷体; } </style></head><body> <div>字体复合属性</div></body></html>

使用 font 时只能省略前两个属性(style、weight),如果省略了,相当于设置了默认值,而且必须按照这个顺序写。

好了,CSS字体相关的知识就到这里了,更多CSS知识都将更新在【CSS专栏】中,欢迎大家订阅关注,一起学习进步!

🌸欢迎关注我的博客:来和我一起成长吧! 🥇往期精彩好文: 📢【HTML基础知识详解】 📢【CSS基础认知】 你们的点赞👍 收藏⭐ 留言📝 关注✅ 是我持续创作,输出优质内容的最大动力! 谢谢!

本文链接地址:https://www.jiuchutong.com/zhishi/297273.html 转载请保留说明!

上一篇:Html5钢琴块游戏制作(音乐游戏)(钢琴块小游戏在线玩)

下一篇:【前端】Vue+Element UI案例:通用后台管理系统-导航栏(前端vue3)

  • 邮政寄信怎么查到哪里了(邮政寄信怎么查询进度)

    邮政寄信怎么查到哪里了(邮政寄信怎么查询进度)

  • 苹果7p是双卡双待吗(iphone 7p是不是双卡)

    苹果7p是双卡双待吗(iphone 7p是不是双卡)

  • 为什么拍的视频发抖音就不清晰了(为什么拍的视频发朋友圈就不清晰了)

    为什么拍的视频发抖音就不清晰了(为什么拍的视频发朋友圈就不清晰了)

  • asf格式文件怎么打开(asf格式文件怎么打开 苹果手机)

    asf格式文件怎么打开(asf格式文件怎么打开 苹果手机)

  • 手机仅还原系统怎么设置(苹果手机怎么还原以前的系统)

    手机仅还原系统怎么设置(苹果手机怎么还原以前的系统)

  • 720p摄像头清楚吗(摄像头720p什么意思)

    720p摄像头清楚吗(摄像头720p什么意思)

  • xsmax跑分多少才正常

    xsmax跑分多少才正常

  • 微信运动步数怎么显示在屏幕上(微信运动步数怎么刷才能几万步)

    微信运动步数怎么显示在屏幕上(微信运动步数怎么刷才能几万步)

  • 什么叫全民营销(什么叫全民营销平台)

    什么叫全民营销(什么叫全民营销平台)

  • 脚注怎么设置成方括号(脚注怎么设置成圆圈1)

    脚注怎么设置成方括号(脚注怎么设置成圆圈1)

  • 怎么看固态硬盘多大(怎么看固态硬盘的型号)

    怎么看固态硬盘多大(怎么看固态硬盘的型号)

  • iphone点两下home有什么用(苹果手机点两下home键有什么用)

    iphone点两下home有什么用(苹果手机点两下home键有什么用)

  • 手机怎么新建txt

    手机怎么新建txt

  • 抖音上怎么做照片卡点视频(抖音怎么做照片合集)

    抖音上怎么做照片卡点视频(抖音怎么做照片合集)

  • 淘宝买家几颗心升钻(淘宝买家几颗心是怎么计算)

    淘宝买家几颗心升钻(淘宝买家几颗心是怎么计算)

  • 电话手表的sos键在哪里(电话手表的sos键是哪个)

    电话手表的sos键在哪里(电话手表的sos键是哪个)

  • 手机保险柜在哪(手机保险柜在哪个文件夹里)

    手机保险柜在哪(手机保险柜在哪个文件夹里)

  • 小米手机如何关闭nfc功能(小米手机如何关闭广告)

    小米手机如何关闭nfc功能(小米手机如何关闭广告)

  • 苹果手机分析数据怎么看重启(苹果手机分析数据怎么看)

    苹果手机分析数据怎么看重启(苹果手机分析数据怎么看)

  • 手机信号hd是啥(手机信号的hd是什么意思?)

    手机信号hd是啥(手机信号的hd是什么意思?)

  • 苹果x录制屏幕在哪里(苹果X录制屏幕在哪里)

    苹果x录制屏幕在哪里(苹果X录制屏幕在哪里)

  • dlss是什么(英伟达dlss是什么)

    dlss是什么(英伟达dlss是什么)

  • 微软Win10正版免费升级步骤以及注意事项一览(win10正版免费下载)

    微软Win10正版免费升级步骤以及注意事项一览(win10正版免费下载)

  • Web项目部署环境搭建:JDK + Tomcat + IDEA +MySQL(java web项目部署)

    Web项目部署环境搭建:JDK + Tomcat + IDEA +MySQL(java web项目部署)

  • 分享使用phpmyadmin如何修改帝国CMS的管理员密码(分享使用护肤品的感受)

    分享使用phpmyadmin如何修改帝国CMS的管理员密码(分享使用护肤品的感受)

  • 分享帝国cms7.0在后台评论表中显示自定义评论字段内容的方法(帝国cms8.0版)

    分享帝国cms7.0在后台评论表中显示自定义评论字段内容的方法(帝国cms8.0版)

  • 进口关税和增值税可以抵扣吗
  • 什么是离岛免税如何购买有哪些特殊规定
  • 出差人员个人原因延迟返回
  • 加计扣除产生的滞纳金
  • 电子承兑被退回在哪里
  • 发票红票和退票区别在哪
  • 稿费计入成本怎么做账
  • 小规模纳税人年应税销售额标准是
  • 怎么报企业所得税季报
  • 免征增值税发票税率
  • 房产税计税依据含税还是不含税
  • 应付职工薪酬期初余额在哪方
  • 税控系统维护费账务处理
  • 外地预缴税费怎么做账
  • 职工伙食团食谱
  • 劳务费发票是几个点的税率
  • 减免税款期末有余额吗
  • 为何要简并增值税税率?
  • 二季度支出小于一季度什么意思
  • 一般纳税人的兼职合法吗
  • 协方差cov计算公式展开
  • 总公司出货分公司怎么办
  • 建筑材料营改增之前怎么开发票
  • 进项税和销项税的借贷方向
  • 电厂采购通常采购什么
  • 个体工商户交企业所得
  • 低值易耗品与固定资产有相同的特征,表现在哪里?
  • 现金日记账需要本月合计吗
  • 一次性计提折旧的政策
  • php文件可包含哪三部分代码
  • 补缴社保操作流程
  • 已提折旧固定资产评估增值的会计处理是企业会计准则
  • shwicon.exe - shwicon是什么进程 有什么用
  • 成本结转的科目
  • 增值税减免后按3%记提税款吗
  • 建造合同完工百分比法
  • php输入框input代码
  • 租入固定资产改良支出属于资本性支出吗
  • 房屋出租房产税如何计算
  • 扣缴义务人的法律地位
  • 亏损企业所得税汇算清缴怎么做
  • 云原生是什么
  • gps定位器怎么开启
  • free命令看到的内存
  • discuz论坛安装步骤
  • 员工体检费发票可以抵扣进项吗
  • 企业财务准则最新
  • 什么是临时雇佣
  • 【MongoDB for Java】Java操作MongoDB数据库
  • 出售固定资产不确认收入
  • 存货报废进项税转出吗
  • 公司间借款利息怎么开发票
  • 管理人员工资属于酌量性固定成本
  • 一般纳税人购买汽车会计分录
  • 税控维护费减免税款
  • 某劳务派遣公司与某传媒公司签订
  • linux 命令帮助
  • Win10笔记本如何重装系统
  • centos inode
  • win10系统mmc不能打开文件
  • putty连接ubuntu
  • ubuntu18.04网络
  • win8系统怎么设置自动关机
  • win8.1应用
  • win8 更改电脑设置
  • linux7.2 sudo权限配置
  • windows8.1关闭开机密码
  • python urllib urlopen
  • shell exec重定向
  • javascript入门教程
  • vue仿知乎
  • amp designer插件
  • python 生成器send
  • js随机生成6位数
  • javascript src
  • 工业厂房房产税什么时候开始征收
  • 增值税税负标准是什么
  • 浙江国地税联合申报系统
  • 02112366电子税务局
  • 出版社税费多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设