css中font简写的问题

最新推荐文章于 2024-06-28 16:15:55 发布
原创 最新推荐文章于 2024-06-28 16:15:55 发布 · 362 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了CSS中font复合属性的正确写法与注意事项，包括font属性的组成元素、书写顺序、必需属性及行高的计算方式。

font复合属性的写法

font复合属性的写法：
font：font-style font-weight font-size/line-height font-family
注意：
1、使用font属性时，必须按照上面顺序书写，不能更换顺序，各个属性中间要用空格隔开
2、不需要的属性可以不写，但是必须保留font-size和font-family属性，否则font属性将不起作用
代码例子:`
在这里插入图片描述
上图代码里的16px/1.5，行高就是16x1.5px

deeppink
关注
CSS-font字体详解
主营前端方向，技术栈是vue
11-21 3152
字体(字体的样式，字体的分类，字体其他样式，字体简写样式，文本样式)
css font的简写规则
weixin_30846599的博客
09-15 137
css font的简写规则 声明：转载点击查看原文 一、字体属性主要包括下面几个 font-family，font-style，font-variant，font-weight，font-size，fontfont-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style（字体样式）: norma...
font属性简写失效的原因font-weight和font-size
RebootTang的博客
06-12 5839
在设置字体样式本来是用各自单个属性设置的，嫌麻烦，不想在每个选择器里都用两行来设置字体的weight 和size，所以换成font的简写，一开始写成下面这样，但是发现不生效, * { font-family: "Microsoft YaHei UI Light", sans-serif; } .selector1 { font-size: 2.5rem; fon...
css中font的简写方法(包括粗细、大小、行高、字体)
12-13
ont:字体粗细 字体大小/行高 字体样式 例子： 复制代码代码如下: font: bold 12px/18px Arial, Helvetica, sans-serif ;
css中font的简写方式
学习也休闲
01-07 2269
一、字体属性主要包括下面几个 font-family，font-style，font-variant，font-weight，font-size，font font-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等; font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）; font-
css font缩写总结附实例
10-30
### CSS Font 属性缩写详解及实例 #### CSS Font 属性概述 在CSS（层叠样式表）中，`font`属性是一个非常实用且强大的复合属性，它允许开发者通过一条语句来设置字体相关的多个属性，包括字体粗细(`font-weight`)...
css下margin、padding、border、background和font缩写示例
10-30
在CSS（层叠样式表）中，为了提升代码效率、减少冗余并增强代码可读性，经常会使用缩写方式来定义元素的样式。本文将详细介绍如何对`margin`、`padding`、`border`、`background`和`font`等属性进行缩写，以及在特定...
02前端学习之CSS3(1)
浅弋、璃鱼的博客
02-09 2314
文章目录一、CSS介绍:二、font字体：三、CSS基本选择器：四、CSS外观样式及应用：五、标签显示模式：六、CSS复合选择器：七、CSS背景及应用：八、CSS三大特性：九、CSS盒模型及应用：十、浮动及清除浮动：十一、photoshop基本操作：十二、CSS四种定位：十三、CSS溢出文字隐藏： 一、CSS介绍: 二、font字体： 三、CSS基本选择器： 四、CSS外观样式及应用： 五、标签显...
解决：字体样式font-family不起作用
热门推荐
weixin_52418790的博客
02-19 2万+
问题： CSS样式设置字体font-family: 华文新魏，但是运行后浏览器的字体样式根本没有使用华文新魏 解决 首先你先看一下自己电脑上是否有这种字体，很大可能是没有这种字体的，所以才不会显示；如果有这种字体还是不显示的话，有没有可能是写错了 查看字体方法：控制面板→外观和个性化→字体 如果是第一种 电脑上没有这种字体的话，就找一个网站，下载好你需要的字体一般是.ttf文件 下载好后，打开文件点击左上角的**“安装”**之后，在电脑上就可以看到刚才安装的字体了 还有一个办法，就是在项目中引入字体
css清除默认样式
wbskb的博客
03-10 1857
* .clearfix::before 作用: 解决外边距塌陷问题,清除浮动 */font: 16px/1.5 微软雅黑;/*去掉input的轮廓线*//* 清除img 自带的一点边距 *//* 清除默认样式，初始化样式 *//* 自减盒子模型 *//* 清除默认圆点 *//* 清除内外边距*//* 取消下划线 *//* 真正清除浮动的标签 *//* 取消标签的字体倾斜 *//* 字体颜色 *//* 设置字体 */
css语法小结
weixin_34117522的博客
09-04 143
前言：或许我们平时已经习惯了css的赋值但却不知道其属性值语法，就好像我们大多数人习惯于使用汉语交流但却没有具体学习过它的语法一样。其实css属性值语法很简单(类似于正则)，那我们为什么要学习它呢？记着怎么赋值不就好了？（我自己认为的）优点有以下三点：1. 遇到陌生的属性，你可以知道怎么赋值。2. 样式有问题时我们能快速检查是否是语法有问题。一、属性值的组成属性值由以下三部分组成：基本元素组合符号...
CSS简单样式
hello_helloworld的博客
09-01 2225
内容主要为CSS的书写规范，书写顺序，CSS单位，CSS选择器（基础选择器、复合选择器），CSS属性（字体，文本，背景，显示模式，显示与隐藏等），CSS引入方式，css的盒子模型（外边距，内边距，圆角边框等），CSS布局方式（标准流，浮动，定位等），用户界面样式（cursor，outline，resize），CSS高级知识（文字溢出省略号，布局技巧），CSS3新特性（属性选择器，结构伪类选择器，filter，calc，transform，线性渐变，animatioon），flex布局，css变量...
CSS样式--字体、文本
小乔与你同在
11-30 373
1 字体样式 字体样式是针对字体本身的一些修饰相关的样式，如字体的颜色，字体的大小等等 1.1 color 字体颜色 属性： color 功能： 设置字体的颜色 值： （略）( 通用颜色值 ) 1.2 font-weight 字体粗细 属性： font-weight 功能： 设置字体是否加粗 值： 关键字：bold-加粗 normal-默认（不加粗） 数值：100~900（没有单位，且只有几百这种...
CSS---关于 font: 15px/1.5 和 font: 15px/15px 的区别
m0_67992720的博客
06-28 340
表示字体大小是15px，行间距是1.5em（即行间距是字体大小的1.5倍：15px × 1.5 = 22.5px）。②font: 15px/15px "宋体" ......;①font：15px/1.5 "宋体" ......;表示字体大小是15px，行间距也是15px。
Web 字体 font-family 浅谈
月来better
04-08 9237
前言 最近研究各大网站的font-family字体设置，发现每个网站的默认值都不相同，甚至一些大网站也犯了很明显的错误，说明字体还是有很大学问的，值的我们好好研究。 不同的操作系统、不同浏览器下内嵌的默认字体是不同的，错误的字体设置会导致页面在不同环境渲染的混乱，选择一套合适的字体是打造优秀网页的第一步。通过本文，我们会介绍字体的知识点，并探索在PC和Mobile两端该如何正确的设置字体。 字体基础知识 字体的分类 serif(衬线) sans-serif(无衬线) monospace(等宽) fanta
html字体的渐变效果,神奇！js+CSS+DIV实现文字颜色渐变效果
weixin_35815640的博客
06-03 812
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下下面是 CSS 部分代码：body{font:12px/1.5 Microsoft Yahei;}h3{padding:10px;margin:0;background-color:#999;color:#fff;font:16px/1.5 Microsoft Yahei;text-align:center;}...
字体随页面大小变化
Mrlujiao_code的博客
01-26 1616
<div class=“testDiv”>测试字测试字测试字测试字测试字</div> 1、css方法： .testDiv{ display:flex; justify-content:space-around; background: royalblue; color: #fff; width: 400px; padding: 20px; font-siz...
CSS中font
最新发布
04-13
<think>好的，用户想了解CSS中font属性的用法和相关知识。首先，我需要整理font属性的基本概念和常见用法。记得要分点说明，结构清晰。 首先，font属性是一个复合属性，包含多个子属性，比如font-style、font-variant、font-weight、font-size、line-height和font-family。需要解释每个子属性的作用，并给出示例。例如，font-style控制斜体，font-weight控制粗细等。 接下来，要注意正确的语法格式，用户可能对简写顺序不太清楚。比如，font属性必须按照特定顺序书写，而且font-size和font-family是必需的。这部分需要强调，避免用户使用时出错。 然后，提供一些常见的使用示例。比如基本用法、简写形式、使用系统字体等。代码示例用反引号包裹，并且注意使用正确的CSS语法。例如： ```css p { font: italic small-caps bold 16px/1.5 "Arial", sans-serif; } ``` 这样的示例能帮助用户直观理解。 还要提到浏览器支持情况，虽然现代浏览器都支持，但某些子属性可能需要前缀或特定处理。比如font-display在@font-face中的使用，引用中的信息可以在这里提及，引用标识要正确添加，比如[^1]。 可能还需要涉及字体加载优化，比如使用font-display: swap来避免布局偏移，这部分参考了用户提供的引用内容，需要自然融入。 最后，生成相关问题，帮助用户进一步学习。例如询问font-display的作用，简写顺序的重要性，或者如何优化字体加载性能。这些问题要围绕用户可能产生的疑问展开。 检查是否所有数学公式都用了正确的LaTeX格式，但这个问题主要涉及CSS，可能数学内容不多，但如果有涉及数值的地方，比如line-height，需要用$...$包裹，比如$1.5$。 确保回答结构清晰，分点明确，代码示例正确，引用标识正确放置。同时，语言要口语化，避免生硬，让用户容易理解。</think>### CSS font属性详解 CSS的`font`属性是一个复合属性，用于同时设置多个字体相关属性。其完整语法包含以下子属性（按书写顺序排列）： $$font: font-style\ font-variant\ font-weight\ font-size/line-height\ font-family;$$ #### 一、子属性说明 1. **font-style** 控制斜体文本，常用值： - `normal`（默认） - `italic`（斜体） ```css em { font-style: italic; } ``` 2. **font-variant** 设置小型大写字母，常用值： - `normal` - `small-caps` ```css .caps { font-variant: small-caps; } ``` 3. **font-weight** 定义字重，支持数值和关键字： - `normal`（400） - `bold`（700） - `100-900`（数值） ```css strong { font-weight: 700; } ``` 4. **font-size/line-height** 必须使用斜杠分隔的字体尺寸与行高： ```css p { font: 16px/1.5 "Arial"; } /* 16px字体 + 24px行高 */ ``` 5. **font-family** 必须作为最后一个属性，指定字体栈： ```css body { font-family: "Helvetica Neue", Arial, sans-serif; } ``` #### 二、强制规则与示例 1. **必需属性** 必须包含`font-size`和`font-family`，其他属性可省略 ```css /* 合法声明 */ h1 { font: 20px "Times New Roman"; } /* 非法声明（缺少font-family） */ h2 { font: italic 18px; } ``` 2. **简写示例** 完整属性组合： ```css p { font: italic small-caps bold 16px/1.5 "Arial", sans-serif; } ``` 3. **使用系统字体** 可调用操作系统预设字体[^2]： ```css button { font: menu; } /* 使用系统菜单字体 */ ``` #### 三、字体加载优化 通过`@font-face`规则配合`font-display`控制字体加载行为[^1]： ```css @font-face { font-family: "CustomFont"; src: url("font.woff2"); font-display: swap; /* 避免布局偏移 */ } ``` #### 四、浏览器支持 - 所有现代浏览器均支持基础功能 - `font-display`需要Chrome 60+/Firefox 58+/Safari 11.1+[^1] - 数值型`font-weight`需要字体文件支持多字重
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值