管理文本的大小在 web 设计领域很重要。但是,不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落。

  font-size 值可以是绝对或相对值。

绝对值:

  将文本设置为指定的大小

  不允许用户在所有浏览器中改变文本大小(不利于可用性)

  绝对大小在确定了输出的物理尺寸时很有用

相对大小:

  相对于周围的元素来设置大小

  允许用户在浏览器改变文本大小

注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。

使用像素来设置字体大小

  通过像素设置文本大小,可以对文本大小进行完全控制:

在 Firefox, Chrome, and Safari 中,可以重新调整以上例子的文本大小,但是在 Internet Explorer 中不行。虽然可以通过浏览器的缩放工具调整文本大小,但是这实际上是对整个页面的调整,而不仅限于文本。

使用 em 来设置字体大小

  如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels。W3C 推荐使用 em 尺寸单位。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

  浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em:pixels/16=em(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em

CSS知识点之字体大小属性font-size的更多相关文章

  1. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  2. css颜色,字体大小的设置

    设置字体的颜色通过下面的代码: color : #f00; color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色. 它的值,一般都是使用#加16进制的颜色值来表示. ...

  3. css中背景 字体 文体属性练习

    @charset "utf-8"; body{ background-color:#332244;/*//背景颜色*/ background-image:("../kk. ...

  4. pc页面在移动端浏览时部分字体放大,与pc字体大小不一致(Font Boosting)

    最近做一个页面时,需要pc的页面在移动端浏览时保持pc的样式缩小.但是发现部分文字被放大了.看上去特别诡异.如下图 绿框是PC端查看时的正常样式,红框是移动端看的字体放大的诡异样式 是什么原因呢? 后 ...

  5. css字体属性(font)

    字体名称属性(font-family) 这个属性设定字体名称,如Arial, Tahoma, Courier等.例句如下: .s1 {font-family:Arial}     字体大小属性(fon ...

  6. CSS中的字体属性和文本属性

    1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...

  7. Sublime Text3自定义全部字体大小、字体类型和背景颜色

    一.定义侧栏的背景颜色.字体大小和间距 Sublime Text3的Afterglow主题链接为:https://github.com/YabataDesign/afterglow-theme 1.按 ...

  8. css 中可以继承的属性

    CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...

  9. css中可以继承的属性

    声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该 ...

随机推荐

  1. [CQOI2014]通配符匹配

    Description 几乎所有操作系统的命令行界面(CLI)中都支持文件名的通配符匹配以方便用户.最常见的通配符有两个,一个是星号(""'),可以匹配0个及以上的任意字符:另一个 ...

  2. 宏 函数 内联函数inline

    带参宏有时候可以代替函数作用:优点直接替代,省去函数调用过程的开销:但缺点也是很明显:容易出错,系统不做检查非常容易出错. 改进方案:内联函数:既有带参宏的直接替代(拷贝)的优点,又有系统检查的优点. ...

  3. solr 常见异常

    solr4.3本地数据提交异常分析 (2013-06-19 16:03:15) 转载▼   异常一. Exception in thread "main" java.lang.No ...

  4. AJPFX关于StringBuffer,StringBuilder类总结(二)

    StringBuffer,StringBuilder类 总结2需要注意的知识点:1):// String -- >StringBuffer        String s = "hel ...

  5. LN : leetcode 684 Redundant Connection

    lc 684 Redundant Connection 684 Redundant Connection In this problem, a tree is an undirected graph ...

  6. coursera网站中的VTT字幕的使用

    coursera网站中的VTT字幕的使用 1.https://www.coursera.org/learn/os-virtsecurity/lecture/xuWgP/1-3-cao-zuo-xi-t ...

  7. vb6如何调用delphi DLL中的函数并返回字符串?

    1,问题描述 最近发现vb6调用delphi DLL中的函数并返回字符串时出现问题,有时正常,有时出现?号,有时干脆导致VB程序退出 -- :: 将金额数字转化为可读的语音文字:1转化为1元 ???? ...

  8. Entity Framework + MySQL 使用笔记

    添加: using (var edm = new NorthwindEntities()) { Customers c = ", Region = "天府广场", Con ...

  9. 在ubuntun虚拟机里安装goLang语言编程环境

    Go语言是谷歌2009发布的第二款开源编程语言. Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程. 北京时间2010年 ...

  10. android和IOS长连接区别

    http://blog.csdn.net/zhangzeyuaaa/article/details/39028369 首先我们必须知道,所有的推送功能必须有一个客户端和服务器的长连接,因为推送是由服务 ...