• 技术文章 >web前端 >前端问答

    css样式中怎么设置字体大小

    青灯夜游青灯夜游2021-06-08 13:51:57原创207

    在css样式中,可以利用“font-size”属性来设置字体大小,只需给文本元素设置“font-size:值;”样式即可。font-size属性用于设置字体大小,实际上设置的是字体中字符框的高度,其实际字符字形可能比框高或矮(通常会矮)。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css样式中,可以通过设置“font-size”属性来设置字体的大小。

    通过 font-size属性可以设置元素中所包含文本的字体大小。如果一个元素没有显式定义font-size属性,则会自动继承父元素的 font-size属性的计算结果。

    实际上font-size属性设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。

    定义 font-size 时,可以使用预定义关键字、绝对尺寸、相对尺寸:

    1)预定义关键字

    预定义关键字有 xx-small、x-small、small、medium、large、x-large、xx-large,尺寸按顺序依次增大,类似于衣服的尺寸。

    使用预定义关键字有两大缺陷:一是只有 7 种选择,可选择范围太小;二是跟衣服的尺寸一样,不同厂商对每个关键字对应的字体大小的精确值可能各不不同,导致在不同浏览器下,文本的大小可能不同。因此,不推荐使用预定义关键字来定义字体的大小。

    2)绝对尺寸

    绝对尺寸有px(像素)、pt(点,1pt 相当于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等。如:

    .px {
     font-size: 14px;
    }
    .pt {
     font-size: 10pt;
    }
    .in {
     font-size: .15in;
    }
    .cm {
     font-size: .4cm;
    }
    .mm {
     font-size: 4mm;
    }
    <p class="px">字体大小: 14px</p>
    <p class="pt">字体大小: 10pt</p>
    <p class="in">字体大小: .15in</p>
    <p class="cm">字体大小: .4cm</p>
    <p class="mm">字体大小: 4mm</p>

    上述代码定义了 5 种字体大小,都使用绝对单位。使用绝对长度单位后,在固定分辨率的显示器下,显示出来的都是固定大小。运行结果如下图所示:

    1.png

    如果以 px 为单位设置字体大小,使用IE浏览器的用户,就不能在浏览器上通过设置“文字大小”来对文本进行放大或缩小。如果文本太小,就会影响阅读,使用户体验大打折扣。

    3)相对尺寸

    相对尺寸有 em、%、rem,它们都是相对于某个参考基准的字体大小,来计算当前字体的大小,只是参考基准不同而已。

    em 的参考基准是父元素。那么,如何计算要指定的 em 值呢?实际上,1em 总是等于父元素 font-size属性的值,这就是 em 的工作原理。据此,可以通过以下公式来确定百分比的值:

    目标元素的字体大小 / 父元素的字体大小 = 值

    因此,在使用 em 定义字体大小时,最好在 html 或 body 元素上建立一个基准。假设在 body 中设置的基准大小为 12px:

    body {
     font-size: 12px;
    }

    如果希望 body 中所有段落的字体大小为 18px,根据上述公式:

    18 / 12 = 1. 5

    因此,只需将将段落的 font-size 设置为 1.5em 就可以了,这条规则就表示段落文本的字体大小为父元素文本大小的1.5 倍:

    body p {
     font-size: 1.5em;
    }

    % 的参考基准也是父元素,100% 也总是等于父元素 font-size属性的值,即 1em 就等于 100%。也就是说,在用 % 定义字体大小时,只需将 em 的值换算成相应的百分数即可。因此,以下两条声明会得到相同的结果(假设两个段落具有相同的父元素):

    p.one {
     font-size: 1.5em;
    }
    p.one {
     font-size: 150%;
    }

    需要注意的是,尽管 font-size 是可以继承的,但在使用 % 和 em 定义字体大小时,子元素继承的是计算结果的值,而不是 % 和 em 的数字。并且,% 和 em 还可以累积。考虑以下代码:

    p {
     font-size: 12px;
    }
    em {
     font-size: 200%;
    }
    strong {
     font-size: 200%;
    }
    <p>12px <em> 200% <strong> 200% </strong></em></p>

    上述代码中,p 为父元素,em 为 p 的子元素,strong 为 em 的子元素。em 元素的基准是 p 元素,而 strong 元素的基准是 em 元素。计算结果如下:

    em:12 × 200% = 24px
    strong:24 × 200% = 48px

    得到的运行结果如下图所示:

    2.png

    在这种多层嵌套的情况下,如果某一个计算结果不是整数,浏览器可能就会取整,子元素再继承取整后的值。如果嵌套很深,下层的字体大小就越来越偏离实际计算值。并且,由于参考基准总是随着元素发生变化,嵌套越深,计算起来也就越困难。

    鉴于此,CSS3中新增的一个相对单位 rem(root em的简称),它总是以文档的根元素(即 html 元素)为参考基准,来设置其它元素的字体大小,即 1rem 相当于 html 元素 font-size属性的值。考虑以下代码:

    html {
     font-size: 10px;
    }
    p {
     font-size: 1.4rem;
    }

    上述声明中,p 元素的字体大小将是 html 字体大小的1.4倍,则计算得到 p 元素的字体大小就是1.4 × 10px = 14px。

    这样一来,无论嵌套多少层,参考基准始终不变,计算字体大小就变得容易多了。不过,需要注意的是,rem 是CSS3新增的一个相对单位,IE9 以下版本的老浏览器却不支持它,这也是很多编程人员尚未使用 rem 的原因。

    在定义字体大小时,笔者建议在 html 元素中定义绝大多数元素所需要的字体大小,并让所有子元素继承 html 的字体大小。如果某个子元素需要要改变字体大小,则使用相对尺寸 em 或 % 或 rem 重新定义。

    这样做的好处是,一方面,绝大多数元素都不必定义字体大小,减少不必要的定义;另一方面,如果完成所有的文字排版后,又要统一调整页面文字大小,就可以只修改 html 中的字体大小,其它所有文字的字体大小会自动变化,修改起来就很容易。

    说明:

    在某些特殊场景下,需要把 font-size 的值设置为0,来隐藏某些文本。但是,在IE6和IE7中,font-size: 0 的文本却变成了小黑点,并没有完全隐藏。

    解决这个问题的最简单办法,就是在 font-size: 0 的同时,把 text-indent 属性设置为一个很大的负值,让这些文本显示在屏幕之外,自然就被隐藏起来。

    (学习视频分享:css视频教程

    以上就是css样式中怎么设置字体大小的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css样式 字体大小
    上一篇:css样式由哪两部分组成 下一篇:css的属性分为什么类别
    VIP会员

    相关文章推荐

    • css中如何定义使用变量• vs中css缩进设置如何调整• css中内边框是什么• css怎样将li的序号取消• 你值得了解的一种CSS获取图片主题色的小技巧(分享)• 利用CSS绘制三角形的6种技巧(分享)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网