GeXiangDong

精通Java、SQL、Spring的拼写,擅长Linux、Windows的开关机

0%

字体的单位

字体的大小,在网页中常见单位是px,印刷和word中,常用五号、四号等形式。

印刷常用字号和毫米对应关系

1英寸=72磅=2.54厘米;显示器的

px和pt(磅)之间的换算和DPI有关,DPI有些地方也称作PPI

1pt = DPI / 72 px

  • Windows 的默认DPI是 96 (用户可以修改);
  • Mac 的DPI是72

DPI=72时 1英寸显示72px, 1pt = 1px
DPI=96时 1英寸显示96个px, 1pt = 96 / 72 = 1.333px (9pt = 12px)

根据字号对应的磅值,可以得到下表的换算后数值

字号 磅 (pt) 毫米 (mm) 像素 (px) DPI=72 像素 (px) DPI=96
八号 4.5 1.581 5 6
七号 5.25 1.845 5 7
小六 6.875 2.416 7 9
六号 8 2.812 8 11
小五 9 3.163 9 12
五号 10.5 3.690 11 14
小四 12 4.218 12 16
四号 14 4.920 14 19
三号 16 5.623 16 21
小二 18 6.326 17 24
二号 21 7.381 21 28
一号 28 9.841 28 37
小初 36 12.653 36 48
初号 42 14.761 42 56

网页中常用的单位

网页中除了px外,还会用到pt、rem, em,

  • em 是指一个字母的宽度(最初指定的是字母M),因为网页默认字体是16px,所以 1em=16px;后来就固定下来了。这个单位会随着浏览器/操作系统放大字号而放大。(px指定的字体在早期IE下不会随着缩放字体而缩放),现在浏览器的缩放功能,都是对整个网页的放大缩小,已经不存在这个问题了。
  • % 字体也可以用百分比指定大小,100% = 16px
  • pt (win 1pt ≈ 1.333px; max 1pt = 1px)
  • cm / mm / in in是inch英寸的缩写, cm是厘米mm是毫米和生活中用到厘米毫米没区别,1in = 2.54cm,这三个单位到px又和DPI相关了。 1in = DPI * 1px;
  • ex 和em类似,用的是字母X的高度,很少有人用

CSS3中新增了几个长度单位

  • ch字符0的宽度
  • rem HTML标签元素的em数
  • vm (viewpoint width), 1vm = viewpointwidth * 1%
  • vh (viewpoint height), 1vh = viewpointheight * 1%
  • vmin = min(viewpoint width, viewpoint height)
  • calc(100% - 5px) 表达式,可以做点简单运算

viewpoint在做手机端网页时会用到