位置: 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)

  • realmegt大师探索版有光学防抖吗

    realmegt大师探索版有光学防抖吗

  • jpeg是用于什么的编码标准(jpeg是用于什么文件的储存)

    jpeg是用于什么的编码标准(jpeg是用于什么文件的储存)

  • ps调整图片大小快捷键(ps调整图片大小不变形)

    ps调整图片大小快捷键(ps调整图片大小不变形)

  • 轻颜相机视频只有一分钟吗(轻颜相机怎么一直录视频)

    轻颜相机视频只有一分钟吗(轻颜相机怎么一直录视频)

  • 抖音如何显示在线状态(抖音如何显示在其他应用的上方)

    抖音如何显示在线状态(抖音如何显示在其他应用的上方)

  • 手机超过15天怎么要求退换货(手机超过15天可以退吗)

    手机超过15天怎么要求退换货(手机超过15天可以退吗)

  • 拼多多子账号有什么用(拼多多子账号有出生日期吗怎么查)

    拼多多子账号有什么用(拼多多子账号有出生日期吗怎么查)

  • 网易云音乐移除粉丝对方知道吗(网易云音乐移除对方关注)

    网易云音乐移除粉丝对方知道吗(网易云音乐移除对方关注)

  • b站稿件审核要多久(b站稿件审核要钱吗)

    b站稿件审核要多久(b站稿件审核要钱吗)

  • 电脑怎么下载spss软件(电脑怎么下载spss26软件)

    电脑怎么下载spss软件(电脑怎么下载spss26软件)

  • 二极管在电路中的作用是什么(二极管在电路中相当于导线吗)

    二极管在电路中的作用是什么(二极管在电路中相当于导线吗)

  • 计算机多媒体技术的特点(计算机多媒体技术专业)

    计算机多媒体技术的特点(计算机多媒体技术专业)

  • 微信闭麦对方看得到吗(对方微信闭麦会有声音吗)

    微信闭麦对方看得到吗(对方微信闭麦会有声音吗)

  • 手机单声道在哪设置(手机单音声道设置在哪)

    手机单声道在哪设置(手机单音声道设置在哪)

  • soul注销了还能恢复吗(soul注销了还能恢复原来账号吗)

    soul注销了还能恢复吗(soul注销了还能恢复原来账号吗)

  • 电脑ppt一般保存在哪里(电脑ppt一般保存多久)

    电脑ppt一般保存在哪里(电脑ppt一般保存多久)

  • 咪咕视频会员有什么用(咪咕视频会员有效期怎么看不到)

    咪咕视频会员有什么用(咪咕视频会员有效期怎么看不到)

  • mt712ch/a是什么版(MT712CHA是什么版本)

    mt712ch/a是什么版(MT712CHA是什么版本)

  • 电脑没带充电器怎么办(电脑没带充电器没电了怎么办)

    电脑没带充电器怎么办(电脑没带充电器没电了怎么办)

  • 微信里的文件传输助手怎么删除(微信里的文件传输助手是什么意思)

    微信里的文件传输助手怎么删除(微信里的文件传输助手是什么意思)

  • iphone热点怎么踢人(苹果手机热点怎么踢人)

    iphone热点怎么踢人(苹果手机热点怎么踢人)

  • win10怎么看电脑被监控没(win10怎么看电脑名称)

    win10怎么看电脑被监控没(win10怎么看电脑名称)

  • c语言strcat_s函数的原理(c语言strncat函数用法)

    c语言strcat_s函数的原理(c语言strncat函数用法)

  • 长期股权投资收回账务处理
  • 月末进项税大于销项税怎么结转
  • 两处工资薪金所得
  • 对公付款对方不开发票怎么处理
  • 电子承兑到期怎么操作流程
  • 经营所得税投资者减除费用
  • 结转累计折旧分录
  • 事业单位结转结余科目
  • 固定资产清理在财务报表哪里体现
  • 存在银行保证金计入什么会计科目
  • 餐饮企业卖套餐赠送单品要交增值税吗?
  • 按期汇总缴纳印花税可以退税吗
  • 房地产企业增值税预缴
  • 劳务公司开的3%专用发票能抵扣吗
  • 免税发票可以抵多少税
  • 费用报销单与付款申请单的用处区别
  • 代开专票怎么做账?
  • 国内外经典案例
  • 长期股权投资年度损益影响金额包括什么
  • 费用报销是先记账后付款还是先付款后记账
  • 固定资产发票可以抵税吗
  • 电子税务局哪里打印发票
  • 代金券消费怎么做分录
  • zmweb.exe是什么进程
  • exedown是什么文件夹
  • 销售已使用过的小汽车增值税
  • uniapp vuecli
  • php查看变量数据类型
  • el-upload上传文件大小限制
  • 质量事故责任书
  • 预缴企业所得税怎么做账务处理
  • php 获取文件类型
  • 专家评审费可以由中标人支付吗
  • 土地抵减销项税 土地增值税
  • java pdf生成工具
  • 使用session的步骤
  • php删除数据
  • 应计入利得和损失项目的有
  • ps如何打圈内环形文字怎么调间距
  • 在建工程转固定资产的账务处理
  • 企业年金是否要交个税
  • 购置环保设备一次性扣除
  • 企业清算所得税申报
  • 交房租会计分录怎么写好
  • 银行汇票的会计处理过程分为什么阶段
  • 坏账核算备抵法的优缺点
  • 买赠销售账务处理
  • 计提的工会经费年底有余额咋处理
  • 去年多计提的企业所得税怎么调整
  • 公司注销时发现有预付款
  • 还银行贷款如何计算利息
  • 永利股权投资基金怎么样
  • 企业如何优化管理
  • 公司购买购物卡账务处理
  • 工程未完工开了发票怎么做账
  • 242104 税控盘
  • 如何设置银行存款日记账
  • 在windows 10
  • 让Vista响应更快
  • chcfg.exe是什么
  • centos如何查看服务进程
  • win10预览版bug
  • linux文件一般放哪里
  • javascript字符串大小写转换
  • shutdown命令不能运行
  • Android:wpa_supplicant决定选择哪种驱动
  • 用python分析csv文件
  • js继承原型链
  • node.js ajax
  • nodejs创建项目
  • java图像对比
  • 音频资料下载
  • 购买的环保设备未使用检察建议
  • 加强税务系统党委全面监督工作
  • 小规模纳税人能开9个点的发票吗
  • 个人所得税如何办理退税
  • 税务局监督执纪存在问题
  • 本期实际抵扣税金怎么算
  • 信用评级机构有几家
  • 何为标兵称号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设