`
RonQi
  • 浏览: 93283 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS中Font语法的缩写

阅读更多

今天同事提了一个问题,说看到一段css代码,大概如下

font: 300 15px/1.65 arial,sans-serif;

 对于前面的300和15px/1.65不理解,难道是除法的意思?

 

上网搜索,在W3School 这里没有找到详细语法,后在一些问答类帖子中找到了答案SOSO问问

答案如下:

写道
字体大小和行高的缩写,分开:font-size:12px;line-height:36px;

 也就是“/”前的为字体大小,后面的为行高,例子中应该是1.65倍的意思,这是一种css的缩写语法(哎,css方面还真是白~~)

 

再后来在一本《CSS权威指南》中找到了详细的答案,摘录如下

《CSS权威指南》p127 写道
font

值:[[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>] | caption | icon | menu | message-box | small-caption | status-var | inherit
初始值: 根据单个属性
应用于: 所有元素
继承性: 有
百分数: 对于<font-size>要相对于父元素来计算;对于<line-height>则相对于元素的<font-size>来计算
计算值: 见单个属性(font-style等)

 此外,font的前三个值允许采用任意的顺序,后两个值要严格按此顺序(font-size在前,font-family在后),而且font声明中必须有这两个值。

另外就是可以在font-size后面使用 / 增加line-height属性,这是可选的。

 

最后说一下前面的300,这个是font-weight属性,参考如下

 W3School 写道
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。

此外可以使用数字:100,200,300...900
数字含义:定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
 

 

 

 

 

分享到:
评论

相关推荐

    css通用缩写语法总结(font字体篇)

    CSS 缩写语法是CSS3中提高代码效率和可读性的重要特性,它允许开发者用更简洁的方式定义多个样式属性。在本文中,我们将重点讨论有关`font`、`margin`、`padding`以及`border`的缩写规则。 首先,让我们详细探讨`...

    常用css缩写语法总结

    本文将深入探讨CSS中常见的缩写形式,包括字体(font)、边距(margin)和内填充(padding)以及边框(border)。 1. **字体缩写(font)** `font`属性的缩写允许一次性定义字体样式、大小、行高和字体家族。基本...

    css的一些语法问题

    ### CSS的语法问题详解 #### 一、字体族(`font-family`) 在网页设计中,`font-family`属性用于指定元素的字体类型。当浏览器无法加载或找不到第一种字体时,它会按照列表顺序尝试加载下一个字体。例如: ```css...

    网页制作之常用CSS缩写语法总结

    ### 网页制作之常用CSS缩写语法总结 在网页设计与开发的过程中,CSS(层叠样式表)是不可或缺的一部分。它不仅能够为网页添加丰富的样式,还能够提高页面的加载速度,优化用户体验。为了更好地掌握CSS,提高工作...

    常用CSS缩写语法总结

    ### 常用CSS缩写语法总结 在前端开发领域,CSS(层叠样式表)是必不可少的一部分,它用于描述HTML文档的外观和格式。为了提高代码的可读性和效率,掌握CSS的缩写语法至关重要。本文将详细介绍并总结常用的CSS缩写...

    HTML、CSS、JavaScript语法简明速查表

    在HTML、CSS、JavaScript语法简明速查表中,你可以找到以下关键点: 1. HTML标签:了解每个标签的作用和用法,如到的标题标签,的段落标签,的图像标签,以及的链接标签等。 2. CSS选择器:理解ID选择器(#id)、...

    常用CSS缩写语法总结.rar

    "常用CSS缩写语法总结"这个资料包正是对这些缩写的集中归纳,旨在帮助开发者提升编写CSS的速度和质量。 1. **简写属性(Shorthand Properties)**: - `font`: 包括`font-style`, `font-weight`, `font-size`, `...

    CSS语法缩写规则

    CSS语法缩写规则是优化CSS代码,提高代码可读性和减少文件体积的重要手段。通过合理的缩写,开发者能够更高效地编写和维护样式表。以下是对这些规则的详细解释: 1. **颜色缩写**: 在16进制颜色表示法中,如果...

    CSS语法手册 CSS手册

    **CSS语法手册** CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、MathML等各种XML方言)文档中元素展现样式的语言。在网页设计中,CSS扮演着重要的角色,它允许我们将表现(样式)与内容分离,...

    CSS样式中文语法名令完全注释.pdf

    6. **font** 简写属性允许你一次性设置所有字体属性,顺序是 `font-style`, `font-variant`, `font-weight`, `font-size`, `line-height`, `font-family`。例如:`font: italic bold 16px/1.5 'Arial', sans-serif;`...

    CSS语法手册(CSS手册)(20211001023802).pdf

    `font` 属性是一个简写属性,可以同时设置`font-style`, `font-variant`, `font-weight`, `font-size/line-height`, 和`font-family`。示例代码如下: ```css font: italic bold 14px/1.5 Arial, sans-serif; ``` #...

    css中文参考手册

    草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...

    css样式表中文手册

    **CSS(层叠样式表)**是Web前端开发中的核心技术之一,用于定义网页的布局、颜色、字体等视觉效果。CSS样式表手册是开发者学习和查阅CSS规则的重要参考资料,尤其对于中文用户,中文手册能更直观、准确地理解概念和...

    css语法手册

    本手册主要介绍CSS中的字体属性,包括`font-family`、`font-style`、`font-variant`、`font-weight`、`font-size`以及`font`简写属性,旨在帮助Web开发者更好地掌握CSS的基本用法,从而提升网页设计的质量。...

Global site tag (gtag.js) - Google Analytics