CSS 常用样式 之字体属性

这篇具有很好参考价值的文章主要介绍了CSS 常用样式 之字体属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. font-weight(字体粗细)

字体粗细用于设置文本的粗细程度,可以使用如下的值:

  • normal:正常字体(默认)
  • bold:加粗字体
  • bolder:更加加粗
  • lighter:更加细

代码实例如下:

/* 设置字体加粗 */
font-weight: bold;

/* 设置字体更加加粗 */
font-weight: bolder;

/* 设置字体更加细 */
font-weight: lighter;
  1. font-style(字体风格)

字体风格用于设置文本的风格,可以使用如下的值:

  • normal:正常字体(默认)
  • italic:斜体字
  • oblique:倾斜字

代码实例如下:

/* 设置斜体字 */
font-style: italic;

/* 设置倾斜字 */
font-style: oblique;
  1. line-height(行高)

行高用于设置文本行与行之间的距离,默认情况下,行高与文本大小相等。

代码实例如下:

/* 设置行高 */
line-height: 1.5;

在此代码中,1.5 是一个乘数,它会将文本的行高设置为文本大小的 1.5 倍。

  1. 组合使用字体样式

可以将字体粗细、字体风格和字体大小等属性组合使用,如下所示:

/* 设置字体样式 */
font: italic bold 20px/1.5 Arial, sans-serif;

在此代码中,字体样式包括斜体、加粗、20 像素大小、行高为文本大小的 1.5 倍、字体为 Arial 或 sans-serif。注意,这里将所有字体样式属性放在一个 font 属性中,以简化代码。文章来源地址https://www.toymoban.com/news/detail-728176.html

到了这里,关于CSS 常用样式 之字体属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 【零基础学web前端】CSS学习,字体属性,文本属性,背景属性,圆角矩形属性

    【零基础学web前端】CSS学习,字体属性,文本属性,背景属性,圆角矩形属性

    前言: 大家好,我是 良辰丫 ,在上一篇文章中我们了解了CSS引入方式,CSS基础选择器,CSS复合选择器,今天我们继续学习CSS的相关知识点.💞💞 🧑个人主页:良辰针不戳 📖所属专栏:零基础学web前端 🍎励志语句:生活也许会让我们遍体鳞伤,但最终这些伤口会成为我们一辈子的

    2024年02月05日
    浏览(12)
  • CSS笔记(黑马程序员pink老师前端)选择器,字体,文本属性,Emmet语法,元素显示模式,CSS背景

    CSS笔记(黑马程序员pink老师前端)选择器,字体,文本属性,Emmet语法,元素显示模式,CSS背景

    选择器分为基础选择器和复合选择器两大类。 基础选择器 包括:标签选择器、类选择器、id选择器和通配符选择器。 多类名 可以把一些标签元素共同的样式放到一个类里面。这些标签都可以调用这个公共的类,然后再调用自己独有的类。 复合选择器 基础选择器的组合.包括后

    2024年02月09日
    浏览(10)
  • 前端使用scale属性结合CSS动态样式实现动态的图片缩放效果

    废话不多说,直接上代码: 示例一,使用css动态样式结合scale进行src图片的缩放。 示例二,使用css动态样式结合scale进行background背景图图片的缩放。

    2024年01月15日
    浏览(9)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(14)
  • 『 前端三剑客 』:CSS常用属性

    『 前端三剑客 』:CSS常用属性

    一 . CSS常用元素属性 1.1 字体家族和 字体大小 设置的字体需要是 windows 上自带的字体 , 要求是系统中已经安装了的字体 使用 css 设置字体为微软雅黑 和 宋体 , 字体大小为 30 px 和 40 px font - size 设置的是字体的字符框的高度的大小 . 设置效果如下所示 1.2 设置字体粗细 font-we

    2024年02月15日
    浏览(7)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(11)
  • 前端编写页面HTML、CSS常用属性方法汇总

    不太常用的属性: box-shadow的: CSS3动画的点: 控制文字行数: CSS3的一些冷知识: @keyframes: HTML5: html+css乱七八糟的: JavaScript:

    2024年02月16日
    浏览(20)
  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(32)
  • 【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

    【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

    层叠样式表(Cascading Style Sheets) 对元素位置的排版进行精确控制,实现结构和样式的分离 CSS 控制页面的展示效果 HTML决定页面的结构 选择器+{一条/N条声明} 选择器:要修改谁 声明:具体要修改什么内容。声明的属性是键值对,用分号区分,键和值用: 通常情况下,把style放

    2024年04月15日
    浏览(8)
  • 【Web前端开发基础】CSS3之Web字体、字体图标、平面转换、渐变

    【Web前端开发基础】CSS3之Web字体、字体图标、平面转换、渐变

    1.1 Web字体概述 每种字体都对应着相应的字体文件,没有 @font-face 规则之前,客户端是否能够正确显示 fontfamily 规定的字体,是由该字体的文件是否预装在客户端决定的。而 @font-face 规则可以将字体文件存放在服务器端,渲染页面时客户端请求从服务器端下载改字体文件进行

    2024年01月25日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包