font-size的探究

整理网上的资料

font字体,用px,em,100%,rem?分什么情况考虑?

我们逐渐意识到,我们用px作为文字大小的单位,已经出现很多问题。最主要是体现在用户不能灵活的控制文字的大小。
 对于大多数用户来说或许这并无不妥,但对于年龄稍大及眼力不佳的访客来说,他们不能按他们的意愿,通过浏览器来改变文字的大小。我们以“用户至上”为原则,我们应该采取一种策略,不要求通过px为单位获得100%的精确性,我们需要获得更大的浏览器的可伸缩性与易用性,灵活的满足访客的需要。

一、长度单位

  长度单位分为两种,一种是相对长度,另一种是绝对长度。
  以下为三种相对长度单位:
  ◆em相对于父对象的大小
  ◆ex相对于特定字体中的字母x的高度
  ◆px相对于特定设备的分辨率,这是最最常用的单位,也是我们一直坚守的单位。从技术角度来说,px像素其实是一种相对大小的度量单位,它于特定设备的显示或打印的分辨率有关。例如,一个像素在被显示在计算机屏幕上与被打印在纸张上的大小是不同的。

  以下为五种font-size属性值绝对长度单位:

  绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。
  ◆in英寸
  ◆cm厘米
  ◆mm毫米
  ◆pt点
  ◆pc12点活字

二、相对大小的关键字

  font-size属性值相对大小的关键字只有两个值:
  ◆larger
  ◆smaller
  这两个值的设定与父对象的设定值有关。我们可以像理解老式的<small><big>那样来理解它们。它们是设定文字大小的最基本的方式,并会受到上层对象的文字大小定义的影响。

  三、绝对大小的关键字

  这类关键字共有7个,他们的实际大小根据不同的浏览器及设备来决定。

  ◆xx-small
  ◆x-small
  ◆small
  ◆medium
  ◆large
  ◆x-large
  ◆xx-large

  W3C建立建议浏览器开发公司,将每个关键字之间的比例设定为1.5。并推荐让这个比例保持恒定,妈medium是small的1.5倍。同样large是medium的1.5倍。

  四、百分比

  font-size属性值中使用百分比设置大小,将在容器对象文字大小的基础上进行改变。如果我们设置body的文字大小为10。我们设置p的文字大小为150%,则p的文字大小就为15。不管10是什么样的单位,百分比作为一种比例进行缩放调整。

我们常用的有px、%、em,px就不多说了,em和%多说点儿:

移动端html5手机网站字体单位font-size选择px还是rem
分为两种情况:
①对于只需要适配手机设备,使用px就可以了
 
②对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
 
rem参考代码:

html {font-size:10px}

@media screen and (min-width:480px) and (max-width:639px) {
    html {
        font-size: 15px
    }
}

@media screen and (min-width:640px) and (max-width:719px) {
    html {
        font-size: 20px
    }
}

@media screen and (min-width:720px) and (max-width:749px) {
    html {
        font-size: 22.5px
    }
}

@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}

@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}

@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}

@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}

em就是基于当前元素的(如果没设置就是继承其父元素的)font-size

而%对于font-sizeline-height等,是基于其父元素的font-size的,而对于text-indentmarginpaddingwidth等属性,则是基于父元素的宽度的。

CSS3中的单位:

css3中引入了一些新的单位:

  • ch——字符0(零)的宽度;
  • rem——根元素(html元素)的font-size;
  • vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;
  • vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;
  • vmin——vw和vh中较小的那个。

显然vw、vh、vmin是针对移动设备的,如果视窗大小变化了,这三个值也会跟着相应的变化。

rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活——或者说,比px灵活,比em更精确~~。。。XD。。。

如果没有定义font-size怎么办?

其实不用担心,传说,各个浏览器史无前例的默认 font-size:16px;,所以,即便你在样式文件中忘了定义 font-size 初始值,也可以放心的使用em、rem。

浏览器支持:

rem,各浏览器基本都支持了:

  • IE9+
  • FF3.6+
  • Chrome 6+
  • Safari 5+
  • Opera 11.6+

vw、vh、vmin:

  • Chrome 26+
  • Firefox 19+
  • Safari 6.1+
  • IE 9+ (部分支持)
  • iOS Safari 6.1+ (部分支持)
  • android 4.4+

同样是xxrem(某个值的rem)的宽度或长度,谷歌比ff、opera等其他浏览器要大很多,因为 Chrome 强制最小字体为 12px,即使设置成 10px 最终都会显示成 12px。

em是相对于父层字体大小的缩放,和你的屏幕大小无关。

时间: 2024-11-09 08:14:56

font-size的探究的相关文章

Generate eps plot with appropriate font size and line width in GNU Octave

Because eps terminal is different from the one for screen display, the font size and line width should all be adjusted as the following example: clist = GenColorList(); h = 1; figure(h); clf(h); # This is mandatory. ## Set the axis position. Sometime

[Android Tips] 9. framework notification layout font size

android 4.4 framework notification layout 相关字体大小 * title: notification_title_text_size: 18dp * content: notification_text_size: 14dp * subtext: notification_subtext_size: 12dp [Android Tips] 9. framework notification layout font size

unity UGUI text font size对性能影响巨大

Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时却总会卡好几秒,导致游戏体验极差.使用屏蔽法查了两天终于找到了问题的原因,原来显示历史最高分的text的font size设成了150.其实本来font size为50就够了,但是由于text的父节点上有个0.3倍的缩放,所以导致text的font size设成150其大小在屏幕上看起来才会适,当初编辑界面的

latex: font size 修改字体大小的几种方式

参考:Adjusting font size with TikZ picture 调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge \Huge 用法如下: \node (c) at (1,2) {\large x}; 版权声明:本文为博主原创文章,未经博主允许不得转载.

XE6 c++builder 设置 font size GetPropInfo SetOrdProp

TObject* objTemp; objTemp = GetObjectProperty(this, "Font"); if (objTemp) { PPropInfo ppi; ppi = GetPropInfo(objTemp->ClassType(), "Size"); if (ppi && (*ppi->PropType)->Kind == tkInteger) SetOrdProp(objTemp, ppi, 12);

GetPropInfo Font Size

设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function GetObjectProperty( const AObject   : TObject; const APropName : string ):TObject; var PropInfo:PPropInfo; begin Result  :=  nil; PropInfo:=GetPropInfo(AObje

LaTeX :font size 修改字体大小的几种方式

调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge \Huge [Reference] 1.Adjusting font size with TikZ picture 原文地址:https://www.cnblogs.com/shenxiaolin/p/10316436.html

UIAlertController custom font, size, color

本文转载至 http://stackoverflow.com/questions/26460706/uialertcontroller-custom-font-size-color up vote2down votefavorite 3 I am using new UIAlertController for showing alerts. I have this code: // nil titles break alert interface on iOS 8.0, so we'll be

Phone Font Size

This table lists and describes the various font sizes that can be applied. Attribute = FontSize Name Type Description PhoneFontSizeSmall Double 18.667 PhoneFontSizeNormal Double 20 PhoneFontSizeMedium Double 22.667 PhoneFontSizeMediumLarge Double 25.

LaTex Font Size 字体大小命令

LaTex中字体大小有很多中等级,分别由下列命令控制: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge \Huge