CSS字体相关属性

简介: 百分比:基于父元素的font-size计算,比如50%表示等于父元素font-size的一半

image.png


1 font-size


具体数值+单位


  • 比如100px
  • 也可以使用em单位(不推荐):1em代表100%,2em代表200%,0.5em代表50%


百分比:基于父元素的font-size计算,比如50%表示等于父元素font-size的一半


2 font-family


font-family用于设置文字的字体名称


  • 可以设置1个或者多个字体名称;
  • 浏览器会选择列表中第一个该计算机上有安装的字体;
  • 或者是通过 @font-face 指定的可以直接下载的字体。


image.png


淘宝单独给小于 body 的标签设置字体的原因是怕有些浏览器单独给那些标签设置了字体,所以设置一下把它覆盖。


3 font-weight


font-weight用于设置文字的粗细


  • normal:等于400
  • bold:等于700


4 font-style


font-style用于设置文字的常规、斜体显示


  • normal:常规显示
  • italic(斜体):用字体的斜体显示(通常会有专门的字体)
  • oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)


5 font-variant(了解)


  • normal:常规显示
  • small-caps:将小写字母替换为缩小过的大写字母


6 line-height


line-height用于设置文本的行高


image.png


行高的严格定义是:两行文字基线(baseline)之间的间距


基线(baseline):与小写字母x最底部对齐的线


image.png


应用实例:假设div中只有一行文字,如何让这行文字在div内部垂直居中


  • 让line-height等同于div的height


7 font 缩写属性


font是一个缩写属性,用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;

font-style font-variant font-weight font-size/line-height font-family


  • 规则:
  • font-style、font-variant、font-weight可以随意调换顺序,也可以省略**(一般都会省略)**


  • /line-height可以省略,如果不省略,必须跟在font-size后面(line-height 如果是数值不带单位的话,表示是前面 font-size 的多少倍


  • font-size、font-family不可以调换顺序,不可以省略


关于上面的第二点规则,让我们看下京东的设置,发现它就是这么设置的:


image.png

目录
打赏
0
0
0
0
1
分享
相关文章
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
CSS属性:盒子模型
CSS属性:盒子模型
47 0
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
63 4
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
61 2
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
93 1
|
4月前
|
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
110 3
前端基础(五)_CSS文本文字属性、背景颜色属性
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等