CSS font-size单位

原创 2016年08月29日 12:46:04

目前对font-size进行定义时,一般有三种方式:单位,关键字,百分比。下面简述三种不同的定义方式以及区别。
1. 单位
使用“单位”进行规定字体大小,可以分为两种情况:绝对长度、相对长度。
绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。
 ◆in英寸
 ◆cm厘米
 ◆mm毫米
 ◆pt点
 ◆pc12点活字
 相对长度单位
 ◆px 相对与屏幕分辨率的单位, 称为“像素”。是国内最常用的字体长度单位。
 ◆em 相对与父组件font-size的单位,国外比较常用。假如如果父组件有设置font-size = 10px; 那么子组件font-size: 2em; 就相当于“font-size: 20px;”如果没有父组件设置过font-size的大小。系统对其默认值为16px。
 ◆rem 相对于根组件的font-size的单位,全称“root em”。rem不再相对于父组件size进行变化,而只是相对跟组件“body”的长度大小进行变化。rem单位在目前的浏览器支持中还没有完全普及,仅少数可以支持。
2. 关键字
“关键字”同样分为:绝对大小关键字,相对大小关键字。
绝对大小:
◆xx-small
  ◆x-small
  ◆small
  ◆medium
  ◆large
  ◆x-large
  ◆xx-large
  从规定上来说,只是规定了这7中关键字相对的关系,x-small是xx-small的1.5倍大小,small是x-small的1.5倍大小,以此类推。数字的大小依照当前的屏幕而自动设定。
  相对大小:
  ◆larger
  ◆smaller
  相对于父组件的size来说,大一点。估计也是1.5倍的关系。
3. 百分比
百分比有点类似与rem,是相对于body font-size大小而定。假设body的font-size:10px,那么font-size:120%,就相当于font-size:12px。百分比大小没有单位而言,如果body font-size:0.5em,那么子组件font-size:150%,就相当于font-size: 0.75em。单位依照body而定。

意思大概就是这么个意思了,有个基本印象就好。

PS: 借用网上一张成品图,直观感受一下:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS中font-size属性值四大种类

本文和大家重点学习一下CSS中font-size属性值四大种类,我们用px作为文字大小的单位,已经出现很多问题,现在IE浏览器是主流,但我们不能通过浏览器设置文字大小,因为我们用px作为文字大小的单位...

CSS Font-Size: em、 px 、pt 、Percent

CSS Font-Size: em、 px 、pt 、Percent 一、基础介绍 1、“Ems”: em,大小不固定 ,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级), 浏览器...

CSS样式中字体大小,建议font-size使用em

转自:http://blog.csdn.net/u010874036/article/details/51582241 在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参...

CSS样式中字体大小,建议font-size使用em

在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看...

CSS里font-size的写法导致的bug

CSS里font-size的写法导致的bug

font-size.js

HTML5基础加强css样式篇(font-family,font-size, font-style,font-variant, font-weight , font 简写属性 )(五)

简介:   font-family 设置字体系列。   font-size 设置字体的尺寸。   font-style 设置字体风格。   font-variant 以小型大写字体或者正常字体显...

Font in CSS {font size, font color, font weight, text decoration, font family

font-family body {      font-family: Verdana, Geneva, Arial, sans-serif;    /* for font-family na...

从网易与淘宝的font-size思考前端设计稿与工作流

从网易与淘宝的font-size思考前端设计稿与工作流 阅读目录 1. 问题的引出2. 简单问题简单解决3. 网易的做法4. 淘宝的做法5. 比较网易与淘宝的做法6. 如何与设计协作7....

我们怎样学会放弃设置默认的font-size而拥抱em

原文链接:http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/ 在css中使用em单位,在灵活性上...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)