Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

不靠谱的 font 相关样式

  font 相关的样式是最不靠谱的了,虽然 CSS 中有默认值,但浏览器的兼容方面是有坑的。而且很多浏览器本身也自带了设置默认 font 的功能,font 应该算是一种用户偏好设置。如果没有 CSS Reset 之类的东西,直接依赖默认 font 样式布局就很容易出问题。
  CSS Reset 是一种粗暴的方式,它的目的是让所有用户看到一样的结果,但一个尊重用户偏好的设计就不应该如此粗暴。比如一个用户的眼神不好,就喜欢用大号的文字,那么我们就应该展示大号的字体(所以 rem 这种单位才会如此有用)。
  虽说尊重用户偏好很重要,但这些 font 相关的样式就不适合与固定尺寸的东西一起作为布局使用。比如如果对一个容器设置了绝对尺寸,那么其内容就应该也设置绝对尺寸。如果在一个绝对尺寸的容器内使用用户定义尺寸的内容很可能就会产生溢出或不居中等情况。比如下面这个例子,期望的是 line-height 默认 16px 加上 .first 和 .last 的高度正好撑满容器。
<style>
.container { width: 100px; border: 1px solid red; height: 36px; }
.first, .last { background: orange; height: 10px; }
</style>
<body>
<div class="container">
  <div class="first"></div>
  <div>test</div>
  <div class="last"></div>
</div>
  然而 line-height 的默认值未必是 16px,这时候就可能布局错位。
  line-height 还算是一个比较靠谱的东西,font-size、font-family 之类的东西才是个大坑。经常会遇到设计稿上完全正常,而页面做出来文字换行了的情况,这也是同样的问题。用户电脑上的字体总是千奇百怪,它们的宽度、基线位置可能都不同。所以设计师在设计时也应该为文字预留空白,以防止出现奇怪的换行。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^