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的单位有px、em、pt

css中font-size的单位有px、em、pt,请问哪个最好2010-03-22 19:34小方同学知道  分类:Html/Css希望得到每个单位的具体分析治学要严谨不太清楚地人就不要回答了不满意...

CSS Font-Size: em、px 、pt 、Percent之间的关系及换算

一、基础介绍 1、“Ems”: em,大小不固定 ,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级), 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展...
  • mosci
  • mosci
  • 2016年05月06日 17:25
  • 965

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

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

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

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

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

px和em区别-在font-size的 css 的使用

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸...

font-size.js

  • 2017年08月03日 15:09
  • 2KB
  • 下载

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

简介:   font-family 设置字体系列。   font-size 设置字体的尺寸。   font-style 设置字体风格。   font-variant 以小型大写字体或者正常字体显...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS font-size单位
举报原因:
原因补充:

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