• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • font-size

    font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小。

    示例

    /* <absolute-size>,绝对大小值 */
    font-size: xx-small;
    font-size: x-small;
    font-size: small;
    font-size: medium;
    font-size: large;
    font-size: x-large;
    font-size: xx-large;
    
    /* <relative-size>,相对大小值 */
    font-size: larger;
    font-size: smaller;
    
    /* <length>,长度值 */
    font-size: 12px;
    font-size: 0.8em;
    
    /* <percentage>,百分比值 */
    font-size: 80%;
    
    font-size: inherit;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持font-size

    语法:

    font-size:absolute-size| relative-size| length| percentage

    设置或检索对象中的字体尺寸

    font-sizeCSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小。

    取值:

    • absolute-size=xx-small | x-small | small | medium | large | x-large | xx-large

      根据对象字号进行调节。以medium作为基础参照,xx-small相当于medium3/5(h6),x-small:3/4,small:8/9(h5),medium:1(h4),large:6/5(h3),x-large:3/2(h2),xx-large:2/1(h1)

      该套绝对大小关键字定义相对于用户的默认字体大小(medium)。与展示HTML的<font size="1"><font size="7">(用户默认字体大小<font size="3">)类似。larger, smaller比父元素的字体大或小,使用与上面的关键字的相近缩放比率。

    • relative-size=smaller | larger

      相对于父对像中字号进行相对调节。使用成比例的em单位计算。

    • length:用长度值指定文字大小。不允许负值。当单位为emex时,大小为相对于父元素的文字的大小。例如,0.5em就是当前元素的父元素的字体大小的一半
    • percentage:用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

    最好使用用户默认字体大小的相对大小,避免使用除了emex的绝对大小单位。但是如果一定要使用绝对大小的话,px是众多单位中最好的选择,因为它的含义不会随着操作系统所认为的屏幕分辨率的大小(通常是不对的)改变而改变。

    默认值medium
    适用于所有元素
    继承性
    动画性
    计算值指定值

    可用方法

    有多重定义字体大小的方法,包括了使用关键字及使用像素或em数字值。请根据网页的特定需求选择适用的方法。

    关键字

    关键字是定义网络字体大小的好方法。通过在body元素上定义关键字字体大小,你可以在网页的任何地方设置相对字体大小,这让你能轻易地缩放整个网页的字体大小。

    px

    当你需要精确地像素时,用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同,所以显示效果可能有微小的不同。

    字体大小的设置也可以使用组合值。例如,如果父元素设定为16px而子元素设定为larger,子元素显示的字体大小就会大于父元素。

    注意:用像素字体定义使得字体大小不可由用户的浏览器改变。(例如,视力较低用户可能希望使用比网页设计师设定的字体大小大很多的字体)所以,如果你想创造能广泛使用的设计请避免使用像素设定字体。

    em

    另一种方法是用em值设定字体大小。em值的大小是动态的。当定义或继承font-size属性时,1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话,那它将等于浏览器默认文字大小,通常是16px。所以通常1em = 16px。2em = 32px。如果你设置了body元素的字体大小为20px,那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。

    可用这个公式计算像素大小的等价em大小:

    em = 希望得到的像素大小 / 父元素字体像素大小

    例如,假设body的文字大小设为1em,且浏览器默认1em = 16px。如果你想得到12px,那你就可设定0.75em(because 12/16 = 0.75)。同样的,如果你想设定文字大小为10px,那就定义0.625em(10/16 = 0.625);若想要22px就定义1.375em(22/16=1.375).

    一个流行的技巧是设置body元素的字体大小为62.5%(即默认大小16px的62.5%),等于10px。现在你可以通过计算基准大小10px的倍数,在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。例如:

    body {
      font-size: 62.5%; /* font-size 1em = 10px */
    }
    p {
      font-size: 1.6em; /* 1.6em = 16px */
    }
    

    因为em可以自动适应用户的字体,em是一个非常有用的CSS单位。

    例子

    /* 设定段落文字大小为非常大 */
    p { font-size: xx-large }
    
    /* 设定一级标题的文字大小为2.5倍大小 */
    h1 { font-size: 250% }
    
    /* 设定span里的文字大小为16px */
    span { font-size: 16px; }
    
    .small {
    	font-size: xx-small;
    }
    .larger {
    	font-size: larger;
    }
    .point {
    	font-size: 24pt;
    }
    .percent {
    	font-size: 200%;
    }
    
    
    <h1 class="small">small h1</h1>
    <h1 class="larger">larger h1</h1>
    <h1 class="point">24 point h1</h1>
    <h1 class="percent">200% h1</h1>
    

    上篇:font-weight

    下篇:font-kerning