人丑就要多读书_

人丑就要多读书_ 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

人丑就要多读书_ 收藏了文章 · 2018-11-01

Sublime Text 3 快捷键

Sublime Text 3 快捷键精华版

Ctrl+Shift+P:打开命令面板
Ctrl+P:搜索项目中的文件
Ctrl+G:跳转到第几行
Ctrl+W:关闭当前打开文件
Ctrl+Shift+W:关闭所有打开文件
Ctrl+Shift+V:粘贴并格式化
Ctrl+D:选择单词,重复可增加选择下一个相同的单词
Ctrl+L:选择行,重复可依次增加选择下一行
Ctrl+Shift+L:选择多行
Ctrl+Shift+Enter:在当前行前插入新行
Ctrl+X:删除当前行
Ctrl+M:跳转到对应括号
Ctrl+U:软撤销,撤销光标位置
Ctrl+J:选择标签内容
Ctrl+F:查找内容
Ctrl+Shift+F:查找并替换
Ctrl+H:替换
Ctrl+R:前往 method
Ctrl+N:新建窗口
Ctrl+K+B:开关侧栏
Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
Ctrl+F2:设置/删除标记
Ctrl+/:注释当前行
Ctrl+Shift+/:当前位置插入注释
Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
Ctrl+Shift+A:选择当前标签前后,修改标签用的
F11:全屏
Shift+F11:全屏免打扰模式,只编辑当前文件
Alt+F3:选择所有相同的词
Alt+.:闭合标签
Alt+Shift+数字:分屏显示
Alt+数字:切换打开第N个文件
Shift+右键拖动:光标多不,用来更改或插入列内容
鼠标的前进后退键可切换Tab文件
按Ctrl,依次点击或选取,可需要编辑的多个位置
按Ctrl+Shift+上下键,可替换行

选择类

Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。

Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。

Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样。

Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。

Ctrl+Shift+M 选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。

Ctrl+M 光标移动至括号内结束或开始的位置。

Ctrl+Enter 在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。

Ctrl+Shift+[ 选中代码,按下快捷键,折叠代码。

Ctrl+Shift+] 选中代码,按下快捷键,展开代码。

Ctrl+K+0 展开所有折叠代码。

Ctrl+← 向左单位性地移动光标,快速移动光标。

Ctrl+→ 向右单位性地移动光标,快速移动光标。

shift+↑ 向上选中多行。

shift+↓ 向下选中多行。

Shift+← 向左选中文本。

Shift+→ 向右选中文本。

Ctrl+Shift+← 向左单位性地选中文本。

Ctrl+Shift+→ 向右单位性地选中文本。

Ctrl+Shift+↑ 将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。

Ctrl+Shift+↓ 将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。

Ctrl+Alt+↑ 向上添加多行光标,可同时编辑多行。

Ctrl+Alt+↓ 向下添加多行光标,可同时编辑多行。

编辑类

Ctrl+J 合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。

Ctrl+Shift+D 复制光标所在整行,插入到下一行。

Tab 向右缩进。

Shift+Tab 向左缩进。

Ctrl+K+K 从光标处开始删除代码至行尾。

Ctrl+Shift+K 删除整行。

Ctrl+/ 注释单行。

Ctrl+Shift+/ 注释多行。

Ctrl+K+U 转换大写。

Ctrl+K+L 转换小写。

Ctrl+Z 撤销。

Ctrl+Y 恢复撤销。

Ctrl+U 软撤销,感觉和 Gtrl+Z 一样。

Ctrl+F2 设置书签

Ctrl+T 左右字母互换。

F6 单词检测拼写

搜索类

Ctrl+F 打开底部搜索框,查找关键字。

Ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。

Ctrl+P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。

Ctrl+G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。

Ctrl+R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。

Ctrl+: 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。

Ctrl+Shift+P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。

Esc 退出光标多行选择,退出搜索框,命令框等。

显示类

Ctrl+Tab 按文件浏览过的顺序,切换当前窗口的标签页。

Ctrl+PageDown 向左切换当前窗口的标签页。

Ctrl+PageUp 向右切换当前窗口的标签页。

Alt+Shift+1 窗口分屏,恢复默认1屏(非小键盘的数字)

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 开启/关闭侧边栏。

F11 全屏模式

Shift+F11 免打扰模式

update

Ctrl+k+2 折叠注释和方法

Ctrl+k+3 折叠if

Ctrl+k+4 折叠switch

查看原文

人丑就要多读书_ 关注了专栏 · 2018-10-27

颜海镜

专注Web前端

关注 722

人丑就要多读书_ 关注了专栏 · 2018-10-27

冴羽的JavaScript博客

冴羽写JS文章的地方,预计写四个系列:JavaScript深入系列、JavaScript专题系列 、ES6系列、React系列。

关注 1468

人丑就要多读书_ 发布了文章 · 2017-07-05

给自己的Fonts教程续

Web Font

上一篇讲的主要是本地字体的解决方案。有时候,本地字体并不能满足我们的使用需求,这种情况下,就要用到Web Font

@font-face

这是一个叫做@font-face 的CSS @规则 ,它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
  

也可以使用本地路径

在另一个文档中使用本地字体或引用SVG字体:

 @font-face {
  font-family: Headline;
  src: local(Futura-Medium),
       url(fonts.svg#MyGeometricModern) format("svg");
}

在编辑器中引用字体:

  @font-face {
  font-family: 'myfont';
  src: url(fonts/NotoSansCJKsc-Regular.ttf);
}

像这样在样式元素中使用:

body{
    font-family:'MyWebFont',Fallback,sans-serif;
}

Font File Types

StringFont FormatCommon extensionsDescription
"embedded-opentype"Embedded OpenType.eotEOT是嵌入式字体,是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染,存储在临时安装文件夹下。
"truetype"TrueType.ttfWindows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
"opentype"OpenType.ttf,.otfOpenType是微软和Adobe共同开发的字体,微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
"woff"WOFF(Web Open Font Format).woffWOFF(Web开发字体格式)是一种专门为了Web而设计的字体格式标准,实际上是对于TrueType/OpenType等字体格式的封装,每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输。
"woff2"WOFF2(Web Open Font Format 2.0).woff2WOFF2是下一代WOFF,拥有比原来更好的压缩性。
"svg"SVG Font.svg, .svgzSVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体,还有一种gzip压缩格式的SVG字体。

Browser Support

-ChromeFirefoxOperaSafariIE / Edge
TTF/OTF43.5103.19[1]
WOFF53.611.105.19
WOFF236392310Not supported
SVG4-37[2]Not supported9-24[2]3.2Not supported
EOTNot supportedNot supportedNot supportedNot supported6
  1. 字体只能在设置为“可安装”时工作。

  2. SVG FONT 的问题在于文件体积很大,有时甚至超过原始的 TTF/OTF 字体文件。Chrome从38开始,Opera从25开始不支持SVG FONT,这种字体在Windows Vista和XP下依然能用。

如果只需要支持较新的浏览器,那么请使用:

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}
ChromeSafariFirefoxOperaIEAndroidiOS
5+5.1+3.6+11.50+9+4.4+5.1+

需要对较旧的浏览器进行支持:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}
ChromeSafariFirefoxOperaIEAndroidiOS
3.5+3+3.5+10.1+9+2.2+4.3+

需要支持IE:

 @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
           url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
           url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    } 

这就是所谓的Fontspring @font-face语法,它是最初的Bulletproof @font-face语法的最新版本。结合使用@font-face格式描述符和各种附加编码,这种语法开发用于诱导浏览器使用它们支持的最佳的(或者在某些情况下是唯一的)Web字体格式。不幸的是,事实证明最初的语法无法防弹(Bulletproof)。经过各种迭代,它必须不断更新来克服各种问题,比如对移动支持和最新浏览器版本(比如IE9)支持的限制。

获取字体

推荐几个常用的字体下载网站Google FontsAdobe Typekitdafont阿里妈妈webfont有字库

免费中文字体列表

字体转换可以使用transfonter或者fontsquirrel,这样你就可以在只有一个文件的情况下,将其转换成不同的文件格式。需要注意的是这两个网站只支持英文字体。

convertio支持中文转换,最大支持到100M,相当不错。

字体压缩,就要使用下面的解决方案:

Fontmin 是一个纯 JavaScript 实现的字体子集化方案。

提供了 ttf 子集化,eot/woff/svg 格式转换,css 生成 等功能,助推 webfont 发展,提升网页文字体验。

font-spider通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

字体加载策略

在你引入的字体被渲染出来之前,他们需要先进行加载。下面是三种在加载的时候可能会发生的事情:

  1. 引入的字体没有被识别出来,字体应用了备用字体。

  2. 引入的字体虽然被识别出来但是没有加载,他需要在下载完成之后才会被应用。

  3. 引入的字体被成功识别并迅速应用。

场景1只发生在你尝试使用一个不存在的字体,或者声明时候的src指向了一个坏链,这种情况可以彻底避免。

场景2包含着字体加载过程,字体加载通常是难以避免的(至少是在第一次请求的时候),下面是处理方式:

字体加载示意图

@font-face

随意把@font-face代码块放置在你的网页中并且希望这是最好的办法. 这是 Google Fonts 推荐的默认方式.

font-display

在你的 @font-face 代码块中增加一个新的 font-display: swap 描述符选择性加入支持 FOUT 的浏览器。另外, 如果考虑到在线字体不是你设计一定需要的, 可以使用 font-display: fallback font-display: optional

到现在为止,只有ChromeOprea支持本属性。

Demo: font-display

预加载 preload

Preload是为处理当前页面所生,这点和 subresource 一样,但他们之间有着细微且意义重大的区别。Preload 有 as 属性,这让浏览器可做一些 subresource 和 prefetch 无法实现的事:

  • 浏览器可以设置正确的资源加载优先级,这种方式可以确保资源根据其重要性依次加载, 所以,Preload既不会影响重要资源的加载,又不会让次要资源影响自身的加载。

  • 浏览器可以确保请求是符合内容安全策略的,比如,如果我们的安全策略是Content-Security-Policy: script-src 'self',只允许浏览器执行自家服务器的脚本,as 值为 script 的外部服务器资源就不会被加载。

  • 浏览器能根据 as 的值发送适当的 Accept 头部信息

    • "script"

    • "style"

    • "image"

    • "media"

    • "document"

    • 更多请参考fetch spec

  • 浏览器通过 as 值能得知资源类型,因此当获取的资源相同时,浏览器能够判断前面获取的资源是否能重用。

web 字体是较晚才能被发现的关键资源(late-discovered critical resources)中常见的一类 。

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

需要注意的一点是:crossorigin 属性是必须的,即便是字体资源在自家服务器上,因为用户代理必须采用匿名模式来获取字体资源。

更快的获取到你的字体。配合 @font-face 代码块使用并且也可以和 font-display 描述符号一起锦上添花。

切记: 这个实现方式的利弊完全取决于配合使用的加载策略, 无论是 随意使用 @font-face 或者 font-display

Demo: preload

内嵌数据 URI

这个方法有两种嵌入式(的代码块): 一个是 <link rel="stylesheet"> 请求或在 <style> 在服务器渲染标记语言中。

alibaba.com (在 CSS 请求中有两个在线字体)

<link rel="stylesheet" href="//i.alicdn.com/sc-aisn/home2017/??common.d2b5f7f7.css"/>

medium.com (7个在线字体)

<link rel="stylesheet" type="text/css" href="https://cdn-static-1.medium.com/_/fp/css/fonts-hinted-base.nXqTvl3tOo9dXbn4BRwJAg.css" />

都使用了这个实现方式。

Demo: Inline Data URI

异步数据 URI 样式表

使用类似 loadCSS 的工具获取样式表, 所有的字体都嵌入在数据 URI 中。你也将竟然看到这个配合一个本地存储方法来把这个样式表存储在用户本地供其他视图重复使用。

Demo: Asynchronous Data URI Stylesheet

有分类的 FOUT

使用 CSS 字体库中的加载API函数(polyfill)去检测当有某一个字体被加载时, 只将这个成功加载的在线字体应用到你的 CSS 中。同时这意味着放置一个开关类在你的 <span><html></span> 元素上。使用 SASS/LESS 进行更简单的维护操作。

Demo: FOUT with a Class

结论: 这是标准线. 被大部分情况使用。

FOFT或两个渲染阶段的FOUT

该实现基于 有分类的 FOUT 方法, 当你要对同一个字型加载不同的字体粗细和样的时候是非常有用的, 比如, Roman , Bold , Italic , Bold Italic , Book, Heavy 等等。 我们可以将在线字体分为两个阶段: Roman 优先, 之后将立即渲染faux-boldfaux-italic的内容(使用字体合成), 然后真实的在线字体, 大权重和加载其他样式。

Demo: FOFT, or FOUT with Two Stage Render

严格的 FOFT

这个方法和标准的 FOFT 实现方式不同的是, 在第一阶段不是完全的 Roman 在线字体, 我们使用 Roman 在线字体的一个子集(通常只会包含 A - Z 和 0 - 9 或标点符号)。 完全的 Roman 在线字体在第二阶段加载不同的权重和样式。

Demo: Critical FOFT

有数据 URI 的严格 FOFT

这个不同的 FOFT 实现方式可以通过第一阶段加载的内容来改变机制。我们可以简单的以直接嵌入数据 URI 到标记语言的形式, 嵌入在线字体, 而不是使用一般的 JavaScript API 来初始化一个下载, 加载字体。就如之前讨论的, 这样会阻塞初始化渲染, 但是由于我们仅嵌入一小部分的子 Roman 在线字体, 对于完全消除FOUT, 这点代价还是值得的。

Demo: Critical FOFT with Data URI

结论: 就我来看, 这就是目前的黄金标准。

有预加载 preload 的 严格 FOFT

这个不同的 FOFT 实现方式可以通过第一阶段加载的内容来改变机制。我们使用新的 preload 在线标准, 而不是使用一般的 JavaScript API 来初始化一个下载, 加载字体。在之前已经介绍过 preload方法, 这会比之前更快的触发下载。

Demo: Critical FOFT with preload

结论: 当浏览器能更好的支持的时候,这会是新的黄金标准。

详细对比请看:字体加载策略全面指南

网络字体加载器:Font Face Observer以及Web Font Loader

unicode-range

unicode-range是CSS一个属性,一般跟@font-face搭配使用。

unicode-range: U+4??;              /* 通配符区间 */

这里面的问号可以理解成占位符,表示0~FU+4??表示U+400U+4FF

中文汉字和常见英文数字等的unicode编码范围实例页面

那么它的主要作用是什么呢?它的用处主要是可以指定特定的字符使用特定的字体。

&字符使用Palatino字体

双引号修改为宋体

漢字標準格式 这里面的标点就用到了unicode-range,看_biaodian.scss

排版

相对大小

尽可能的使用相对大小。

html { font-size: 100% }
p { font-size: 1em }

@media (min-width: 64em) {
  html {
    font-size: 112.5%;
  }
}
  • font-size: 100% 与浏览器的字体大小设定保持一致而不是去覆写它,根据大多数的浏览器的默认设置,这里也可以用1em 代替表示 16px.

  • 通过改变htmlfont-size会影响到所有单位为 emrem 的元素.如果是对于响应式设计的网页,这样做还是比较实用的。

  • 用户的选择也很重要,所有不要偏离 font-size: 100%1em太远.

  • 对于font-size建议使用remem.

  • 对于一些元素定位如margin, padding等等,建议使用 rem, em, 或者%

  • 对于媒体查询中尺寸建议使用em.

  • 对于一些大的标题字或者配有图片的字,可以使用FitText来实现标题的缩放。尽量避免使用vwvh 因为现在的支持还不是很好,难于精确的配置,并且对于一些浏览器的字体和缩放设置并不适配 。

容器

容器,或者成为包装,指的是用来包裹一个或者多个元素的HTML元素。它将元素分组,从而更好进行语义化、修饰以及布局。

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  max-width: 67rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
  • 强烈建议使用 box-sizing: border-box. 点击这里 查看更多信息。

  • 左/右内间距与最大宽度联合使用可以很容易地创建一个移动端友好的容器。

  • 要为容器选择一个合适的宽度,既不能太大(因为太大的话读者的眼睛难以聚焦)也不能太小(这样读者的眼睛需要经常移动才可以看清)。永远记住,在进行网页字体排版的时候,没有一个适合所有字体、尺寸、行距和分辨率的铁律,你需要自己来做决定。

字体大小

使用 缩放模块 可以帮助你决定在你的元素上面应用怎样的font-size .缩放模块指的是依照其内容安排的一系列比较合适的字体大小的数值。

缩放模块的说明. 点击此处

  • 我们可以在编写CSS的一开始使用缩放模块,将它作为一个参考。

  • 值的注意的是,尽管不同的字体有着不同的大写字母高度和x字母高度,可是大多数的模块化缩放工具都没有将这些考虑在内。

  • 在你的样式表中,建议将你所使用到的缩放模块工具的配置信息写在注释之中。

响应式的缩放模块

只使用单独的一个缩放模块方案并不一定适合所有分辨率的设备,为了解决这个问题,你可以依据用户的设备的分辨率的不同提供不同的缩放方案

//Sass responsive modular scale

/* 
 * Modular scale
 * http://www.modularscale.com/?1.25&em&1.33&web&text
*/

$type-scale-large: (
  h1: 3.911rem,
  h2: 2.941rem,
  h3: 2.211rem,
  h4: 1.663rem,
  p: 1.25rem
);

/* 
 * Modular scale
 * http://www.modularscale.com/?1.25&em&1.25&web&text
*/

$type-scale-medium: (
  h1: 3.052rem,
  h2: 2.441rem,
  h3: 1.953em,
  h4: 1.563rem,
  p: 1.25rem,
);

/* 
 * Modular scale
 * http://www.modularscale.com/?1.1&em&1.25&web&text
*/

$type-scale-small: (
  h1: 2.686rem,
  h2: 2.148rem,
  h3: 1.719rem,
  h4: 1.375rem,
  p: 1.1rem
);

$breakpoint-medium: 75em;
$breakpoint-small: 45em;

@mixin size($level) {
  font-size: map-get($type-scale-large, $level);
  @media (max-width: $breakpoint-medium) {
     font-size: map-get($type-scale-medium, $level);
  }
  @media (max-width: $breakpoint-small) {
     font-size: map-get($type-scale-small, $level);
  }
}

// Example

.title {
  @include size(h1);
}

垂直距离

文字间的垂直距离是由 line-height, margin, 和padding构建出来的.

  • line-height 不应该带有单位。比较宽的容器里面文字的行高会大一些,而那些比较窄的容器里面行高相对来说小一些会比较合适。

  • 为那些具有单方向的文本元素添加margin属性,建议使用margin-bottom

  • 要遵循距离原则

垂直节律

垂直节律是指元素之间的垂直间隔要保持一致性。这一点十分重要,它可以带给读者视觉上放松的享受,给他们一种亲近的感觉。

Image source

建立垂直节律很简单。首先,确定你使用的基础垂直内间距和基础垂直外间距的数值。然后,为你的容器,文字性元素或者其他相关元素的单方向的外边距(或者内边距)应用这个数值。如果你需要制制造更大的间隔的话,应用这个数值的倍数就好啦!

将基础间距的数值设置成与行高相同的数值,这样你的文字就像写在一个条格纸上那样整齐,就像我们传统的印刷字体设计的那样。然而,想要文字拥有垂直节律不一定需要按照上面的方法来做,只要你设置了一个基础间距,并且使得其他间距都是由这个间距成倍的得来的,那样就可以了。

body { 
  line-height: 1.4; // Base line height
}

p { 
  font-size: 1.25em; // Base font size
  margin-bottom: 1.75rem; // Base vertical spacing: (1.4 * 1.25) = 1.75
}

h1 {
  font-size: 3em;
  margin-bottom: 3.5rem; // Double the base value for a larger gap (1.75 * 2) = 3.5
}

h2 {
  font-size: 2em;
  margin-bottom: 1.75rem;
}

h3 {
  font-size: 1.5em;
  margin-bottom: 1.75rem;
}

.page-container {
  padding: 3.5rem 2rem; // 3.5 is double the base value
}

/* Simple Sass Implementation */

$base-line-height: 1.4;
$base-font-size: 1.25rem;
$vertical-rhythm: $base-line-height * $base-font-size;

body { 
  line-height: $base-line-height;
}

p { 
  font-size: $base-font-size;
  margin-bottom: $vertical-rhythm;
}

h1 {
  font-size: 3em;
  margin-bottom: $vertical-rhythm * 2;
}

h2 {
  font-size: 2em;
  margin-bottom: $vertical-rhythm;
}

h3 {
  font-size: 1.5em;
  margin-bottom: $vertical-rhythm;
}

.page-container {
  padding: ($vertical-rhythm * 2) 2rem;
}

Note that rem is used for spacing as it is not influenced by the font-size of the element.

文字底部对齐基线网格

文字底部对齐基线是垂直节律的一个更为严格的实现。在网页中,文字通常在line-height间居中对齐.但对于较大的文字来说会比较讨厌,因为这样做会导致在顶部和底部留有太多的空间。在传统印刷的时候,这个问题一般会通过让文字对齐基线网格的底部得以解决。

我们也可以通过为较大的文字添加一个负的margin-top和一个较小的margin-bottom,不需要使用基线网格而解决这个问题。

图片资源

为不同的字体样式、字体大小和分辨率添加一个底部对齐的基线网格并不是一个很容易的方式,所以强烈建议你使用一个字体排版基线库例如 Sassline 或者 MegaType.

注意,垂直节律只是一个建议,而且基线网格也只是想象出来的。所以我们不需要在每个使用场合都遵循这个规律,也不用在每个元素中都去追求像素级别的完美。

颜色

颜色可以很大程度上的增加视觉辨识度,是字体排版中一个重要的组成部分。

不要随心所欲的挑选颜色,建议使用颜色板,建议你使用 Material Design colorsFlat UI colors 中提供的颜色板进行颜色选择.
不要过度滥用一个颜色,因为这样会造成辨识度的降低,同样也不要使用很多完全不同的颜色。
遵循相似原则.
不建议使用纯黑 #000 作为你的正文颜色,你可以选择一个非常灰的颜色如#333.
有时候,使用透明颜色比使用浅色会更好一些,如果你深入的了解,可以点击这里
确保文字和背景有较大的对比度,你可以使用 这个对比度检测工具 帮助你进行选择.

下划线

在印刷品里,永远都不要使用到下划线,因为这样做会影响文字的阅读,重点是,它很丑!Practical Typography

一般的来说,在网页中下划线也会看起来并不美好!幸运的是, background-image 就包含一个方法,它可以使得下划线变得好看一点。 下面是Adam Schwartz使用Sass实现的下划线的例子 :

@mixin text-underline-crop($background) {
  text-shadow:  .03em 0 $background, 
                  -.03em 0 $background,
                  0 .03em $background,
                  0 -.03em $background,
                  .06em 0 $background,
                  -.06em 0 $background,
                  .09em 0 $background,
                  -.09em 0 $background,
                  .12em 0 $background,
                  -.12em 0 $background,
                  .15em 0 $background,
                  -.15em 0 $background;
}

@mixin text-background($color-bg, $color-text) {
  background-image: linear-gradient($color-text, $color-text);
  background-size: 1px 1px;
  background-repeat: repeat-x;
  background-position:  0% 95%;
}

@mixin text-selection($selection) {
  &::selection {
    @include text-underline-crop($selection);
    background: $selection;
  }

  &::-moz-selection {
  @include text-underline-crop($selection);
  background: $selection;
  }
}

@mixin link-underline($background, $text, $selection){
  @include text-underline-crop($background);
  @include text-background($background, $text);
  @include text-selection($selection);

  color: $text;
  text-decoration: none;

  *,
  *:after,
  &:after,
  *:before,
  &:before {
    text-shadow: none;
  }

  &:visited {
    color: $text;
  }
}

/* Example usage */
a {
  @include link-underline(#fff, #333, #0CBF);
}

clipboard.png

SmartUnderline 是一个简化这个工作的库。
建议你只在有链接的地方使用下划线,这是大多是网站都遵循的规律,如果不这么做的话,可能会引起误解。

Using @font-face

Web版式和@font-face简介 - InfoQ

Preload: What Is It Good For?

Preload: What Is It Good For?中文翻译版

字体排版手册

CSS unicode-range特定字符使用font-face自定义字体

妙用UNICODE-RANGE实现字体混搭

查看原文

赞 2 收藏 4 评论 0

人丑就要多读书_ 发布了文章 · 2017-06-25

给自己的Fonts教程

准备工作

字符 - Character

字母、数字、汉字、符号等,是一种抽象实体。

字形 - Glyph

单个「字符」的具体表达,一个字可有多个不同的字形。

Glyph

原则上 Unicode 中只对,而非字形编码。

字型 - Font

印刷行业中,指某一整套具有同样样式和尺码的字形,如一整套中易宋体 5 号字、一整套 9 磅 Helvetica Neue粗体字。

Helvetica Neue的字重

字体 - Typeface

若干个「字型」在若干个尺寸上的集合。

字体与字族

随着计算机字体 (computer font) 的普及,可缩放的矢量字体的出现使得「字型」与「字体」的界限逐渐模糊,现今这两个概念在数字排印领域越来越多地被当做同义词使用。

「书体」- 宋体、仿宋体、黑体等…

例如 Windows 自带的「宋体」实为「中易宋体」。

Fonts分类

西文字体

基础术语

基础术语

基础术语

分类

名称描述举例
serif(衬线体)衬线体有爪形的衬线并且笔划粗细有变化Centaur,Garamond,Caslon,Baskerville,Didot,Bodoni
sans-serif(无衬线体)完全抛弃装饰衬线,笔画粗细对比小,x高度较高Helvetica,Franklin Gothic,Futura,Gill Sans,Optima,Univers,Myriad,Avenir
cursive(手写体)一般具有连笔(joining strokes)或者其它除斜体字体外的手写特征Comic Sans MS
fantasy(幻想体)主要是装饰性的,但仍然具有字符表现(与不表现字符的Pi或者Picture字体相反)Bodoni Ornaments
monospace(等宽体)所有字形都具有相等的固定宽度Menlo

这里面,我们经常用到的是serif体和sans-serif

serif

sans-serif

Serif与Sans-Serif

Serif强调字母笔画的开始及结束,因此前后连续性强,易读性高。

Sans Serif则较醒目,但在行文阅读的情況下,Sans-Serif 容易造成字母辨认的困扰,常会有来回重读及上下行错乱的情形。在小字体的场合,通常Sans-SerifSerif更清晰。

适用用途

通常文章的內文、正文使用的是易读性较佳的 Serif 字体,这可增加易读性,而且长时间阅读下因为会以word为单位来阅读,较不容易疲倦。

而标题、表格內用字则采用较醒目的Sans Serif字体,它需要显著、醒目,但不必长时间盯著这些字来阅读。

像宣传品、海报类,为求醒目,它的短篇的段落也会采用Sans-Serif字体。但在书籍、报刊杂志,正文有相当篇幅的情形下,则应采用Serif字体来减轻读者阅读上的负担。在Web设计及浏览器设置中也应遵循此原则为是。

中文字体

中文的书写体系有两种标准,一种是简体中文,一种是繁体中文

简体繁体

分类

名称描述举例
宋体(明朝体、明体)横笔画水平、竖笔画粗壮、拥有华丽但规范字脚的字体中易宋体(SimSun),新宋体( the Times New Roman)
黑体(哥特体)结构方正,没有字脚中易黑体(SimHei),微软雅黑(Microsoft YaHei),思源黑体( Source Han Sans)
楷体横笔画也可以带角度,柔软且富有弹性的末端,以及符合自然的笔触宽度Kaiti,方正楷体
仿宋(宋朝体)横微微倾斜,不会有很大的字脚,横竖笔画的粗细对比也没有宋体那么大方正仿宋
美术体美术体是一类极具风格的字体,它们可以包括从稚嫩到厚重到新奇的各类风格丁丁手绘体

另外,圆体(圆黑体)通常也归入黑体。传统上说的「等线体」以当代视角来看通常是较为幼细的黑体。

中文字体界不少人不主张用「衬线」、「无衬线」来指代宋体和黑体。

宋体

宋体

黑体

黑体

楷体

楷体

仿宋

仿宋

宋体与黑体

宋体,原形为宋代模仿楷书基本笔划(如点、撇、捺),但因应当时以木板作活版印刷,为顺应木的天然纹理,而从楷体左低右高的斜横演变成直横,因为减低损耗而将竖划加粗的印刷用字体。到明代,这种字体逐渐脱离楷书的模样,成为一种成熟的印刷字体。

黑体的发明比较晚,学者对于黑体的历史有很大的争议,但我们可以发现它是二十世纪早期广告印刷品的产物。

适用用途

由于宋体是因为印刷诞生的,所以它更适合报纸和书籍的正文类文字的排版。

由于黑体醒目的特点,常用于标题、导语、标志等等。由于汉字笔划多,小字的黑体清晰度较差,所以一开始主要用于文章标题,但随着制字技术的精进,已有许多适用于内文的黑体字型。

计算机字体分类方式

1. 点阵字体(Bitmap Fonts)

  • 本质上是点阵图片的集合。

  • 渲染极快

  • 显示效果稳定

  • 容易创建

  • 在小字号、多笔画时渲染效果较好

  • 视觉效果较差

  • 不适合缩放

2. 轮廓字体(Outline Font)

  • 是向量图的集合,用 Bézier 曲线描述字形,适合缩放。

  • PostScript 字体

    • Adobe 开发

    • 用三次 Bézier 曲线描述字形。

    • 私有 hinting,价格昂贵

    • 质量高,适合打印专业质量的印刷出版物

    • 又细分为 Type1 / Type3 / CID 等类型

  • TrueType 字体

    • Apple 为对抗 Adobe 的 Type1 与 Microsoft 共同开发

    • 用二次 Bézier 曲线描述字形,渲染较快

    • 可内置点阵字体

    • 在 OS X 和 Windows 中是最常见的字体格式

  • OpenType 字体

    • 源于 Microsoft 独自开发的 TrueType Open

    • 后 Adobe 加入开发,增加对 PostScript 轮廓的支持

    • PostScript flavor / TrueType flavor

    • Adobe 黑体

3. 笔画字体(Stroke-based font)

4. METAFONT

计算机字体区别

如何理解点阵字体和轮廓字体的区别呢,其实它们的表现和图片格式中的png8和png24的的区别很类似,点阵字体都是实色,没有过渡色,边缘锐利,而轮廓字体有过渡色,边缘也比较平滑。很多人把“宋体”(Simsun)当作点阵字体,其实不是,它和“微软雅黑”(Microsoft YaHei)一样,都属于轮廓字体,只不过12px~17px的宋体内置了点阵信息而已。

如下图,前面有两个 T 的是 TrueType 的格式字体,O 开头的是 OpenType 的字体。

OpenType字体中的字形(glyph)、轮廓数据可以在两种格式中任选其一:一个是在glyf表中TrueType格式轮廓,另一个是在CFF表中的CFF(压缩字体格式,Compact Font Format)格式轮廓。CFF轮廓数据是基于PostScript语言Type 2字体格式。表格名CFF长度为四个字符,并且以一个空格字符结尾。

TrueType flavorPostScript flavor

TrueType
OpenType

OS与Fonts

Windows 字体列表

Mac OS X 字体列表

Windows、OS X、Liunx/Unix预装中文字体demo

上面的例子列举了WindowsOS XLiunx/Unix预装字体以及一些版权字体

默认中文字体

WindowsOS XLinux/Unix
微软雅黑UI(MicroSoft YaHei UI)Win8+苹方-简(PingFangSC)OS X 10.11+文泉驿微米黑(WenQuanYi Microhei)
微软雅黑(MicroSoft YaHei )Win Vista+黑体-简(Heiti SC)Mac OS X 10.6+-
中易宋体(SimSun)华文黑体(STHeiti)-
-冬青黑体简体中文(Hiragino Sans GB)Mac OS X 10.6+ 非默认-
AndroidIOS
思源黑体(Noto Sans CJK SC)Android 5.0+苹方-简(PingFangSC)IOS9.0+
Droid Sans Fallback黑体-简(Heiti SC) iPhone OS 3.0+
-华文黑体(STHeiti)

默认西文字体

无衬线衬线等宽
San Francisco(OS X 10.11+/IOS9.0+GeorgiaMenlo
Helvetica(IOS1.0+) / Helvetica Neue(OS X10.10+/IOS 4.0+Times New RomanCourier
Lucida Grande(OS X)-Monaco
Segoe UI(Win Vista+--
Tahoma--
Verdana--
Arial--
Roboto(Android 4.0+--
Droid Sans(Android)--

Fonts的渲染过程

编码

为什么需要编码?

我们知道计算机处理的数据实际上都是二级制的数据,也就是计算机实际上只识别0和1两种状态。发明计算机的过程中人们需要解决的第一个问题就是文字的处理问题,也就是我们如何将文字符号转化为二级制数据,同时我们也需要能够将转化后的二进制数据重新转化为文字符号供我们阅读。前面的过程我们称之为编码,后面的这个过程我们称之为解码。这和电信领域更著名的一套编解码规则莫尔斯码是一个原理。

鉴于各个国家都有自己的字符集和编码方式,为了实现在一份文档中可以正确显示所有类型的字符,Unicode诞生了,伴随着互联网的发展,Unicode字符集和UTF-8编码方式成了互联网通信的标准。

这张 Unicode表分成了很多的 block,把某一类字符放在指定的 block 中,如下图

unicode表

西文字体比如 Helvetica 等,一定会完成拉丁文对应的 block 中的字形,但是他们是不会去做 CJK(中日韩) 的字形。而特殊字符,比如表情符号等,也是有预留位置的,这也是为啥我们经常发现别人发过来的一些东西是方块,因为对方发送的字符在我们自己的机器上并没有相应的字体来显示。

详细编码知识请看 乱码是怎样形成的?

解码

当浏览器收到来自Web服务器的数据后,第一步就是要把它解码成可以阅读的文本,而浏览器判断代码主要是依据以下方法:

  1. Web服务器返回的HTTP头中的Content-Type:text/html;charset=信息,这一般有最高的优先级;

  2. 网页本身metaheader中的Content-Type信息的charset部分,对于HTTP头未指定编码或者本地文件,一般是这么判断;

  3. 假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码。

  4. 部分浏览器 (比如 Firefox) 可以选择编码自动检测功能,使用基于统计的方法判断未定编码。

分段

编码确定后,网页就被解码成了Unicode字符流,因为我们得到的文本可能是很多种语言混杂的,里面可能有中文、有英文,它们可能要用不同的字体显示;

为了统一处理这些复杂的情况,我们要将文本分为由不同语言组成的小段,在有的文本布局引擎里,这个步骤称为“itemize”。分解后的文本段常被称作“text run”,但是具体划分的规则可能根据不同的引擎有所区别。

不少浏览器还会在这个划分下面,在确定具体使用的字体之后,根据使用字体的不同划分更细的 run,这种 run 可能称作“SimpleTextRun”,每个都会使用和相邻不同的字体,最后把它们逐一交给 shaper 进行排版得到要绘制的字形,这样一来,shaper 的工作就被简化为在确定的语言、确定的字体下排版确定的文本,生成对应的字形和它们应该放置的位置、占用的空间。

Fonts匹配

CSS 2.2 Font matching algorithm

  1. UA 创建(或访问)一个 CSS 2.2 相关属性的字体数据库;

  2. 对每个元素的每个字符,先尝试匹配第一个 font-family 名字;

  3. 找到则尝试匹配剩余属性 (font-style, font-variant, …);

  4. 如果 (1) 没有完全匹配的字体,或 (2) 字体匹配但相应字形缺失,则尝试匹配下一个 font-family

  5. 如果 font-family 无法匹配,UA 分配默认字体;

  6. 如果该字符在 UA 选择的所有字体下均无字形,UA 应选择某个字体中的「missing character」的字形,
    例如「�」。

CSS3字体匹配算法与CSS2.1字体匹配算法的差异:

  • 算法包括font-stretch匹配。

  • 确定了font-style匹配中所有可能的情况。

  • 小型大写字母字体不作为字体匹配过程的一部分进行匹配,它们现在通过字体特性进行处理。

  • 需要Unicode variation selector匹配。

Font属性

font属性使用小demo

小米官网

 font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;

Font-family属性

Font匹配是通过哪个名称?

name - Naming Table

按 OpenType 规范,字体的名称信息存在 name 表中。

  • Name Records

    • Platform ID

    • Platform-specific encoding ID

    • Language ID

    • Name ID

Name IDs(部分)

ID含义
1Font Family name (Family)
2Font Subfamily name (Style)
4Full font name (Full)
6PostScript name
16Preferred Family
17Preferred Subfamily
18Compatible Full (OS X only)
21WWS Family Name
22WWS Subfamily Name

宋体 (中易宋体) - Windows Unicode BMP

Name TypeChinese - PRCEnglish - United States
Family宋体SimSun
StyleRegularRegular
Full宋体SimSun
PostScript name宋体SimSun

Adobe 黑体 - Windows Unicode BMP

Name TypeChinese - PRCEnglish - United States
FamilyAdobe 黑体 Std RAdobe Heiti Std R
StyleRegularRegular
Full-AdobeHeitiStd-Regular
Preferred FamilyAdobe 黑体 StdAdobe Heiti Std
Preferred SubfamilyRR
PostScript nameAdobeHeitiStd-RegularAdobeHeitiStd-Regular

Windows 的字体预览会采用你目前的系统语言对应的 Preferred Family 作为命名,如果此项缺失则会用系统语言 Family、英语 Preferred Family、英语 Family。

对浏览器来说不同浏览器的处理策略是不一样的,比如 IE9 和 FF4 支持按照 Preferred Family 选字而 Chrome 只按照 Family(Opentype 规范里的 [name] 表项目)搜索。

Fallback

fallback是字体匹配算法的重要机制,我们看一下下面的例子:

font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;

Fallback

这个 fallback 的规则可以总结为

(hasFont && isInUnicodeTable) ? 'Current Font' : 'Next Font'

就这样一直找匹配的字体,直到系统默认,所以一般都把系统默认的5类字体放到 font-family 定义的最后来写。

CSS规范里只简单的说执行“system font fallback”。但这个过程在不同的系统不同的浏览器下可能很不一样,比如:

  • OS相关机制

    • Linux下一般通过fontconfig去根据语言、风格等参数来选择fallback,但不同浏览器的实现还可能有区别。

    • Windows下则一般会使用系统的Font Linking机制,根据注册表内的FontSubstitutes信息来寻找。

    • OS X是按照字体后备列表进行fallback。
      os x fallback

  • 浏览器配置

    • WebKit settings 中可设定各个 generic family 的默认值。

    • Firefox访问 about:config 后筛选出的 font 相关项中包含不同语言下 generic families 的默认值。

    • Webkit会使用font-family列表的第一个字体和这段文字所属的语言来寻找fallback字体,像Times这样的serif字体对应的中文fallback字体,在Mac OS X下是华文宋体(STSong)。

    • Firefox则会根据sans-serif这样的通用font-family和对应的语言匹配到设置中针对对应语言的默认字体,比如在MAC OS X 默认的中文非衬线字体是华文黑体(STHeiti)(新版本 OS X是苹方-简)。

  • charset、lang 属性、font-family值

因为在这里不同的浏览器可能有不同的行为,所以建议在CSS中应写明对应平台所使用的字体。

具体的字体选择还有一些不太容易注意的细节,也是各个浏览器差异比较大的一点,可能会出现这样一些问题:

  • 是否支持用字体的PostScript name选择:如STHeiti的Light版本又称作STXihei,或者是否能用full name 选择:有的浏览器不能正确地将CSS里对字体的font-weight或者font-style等要求映射到特定的字体上,尤其是在字体使用了非标准的style明明的情况下。

  • 是否支持按 Localized name选择:比如能不能用“宋体”来代表“Simsun”。以Mac OS X下的浏览器为例,Firefox支持这样的写法,但基于Webkit的浏览器一般不支持,这样的问题CSS规范没有限定,所以无论哪种情况都是允许的。

总的说来,如果要保证最大限度的兼容性,在 CSS 书写的时候应该尽可能选择明确、不容易出错的写法,尽量少隐式地让浏览器自己确定 (be explict instead of implict),虽然隐式写法通常比较简洁,但除非你 100% 确定想支持的浏览器在你想支持的平台下都能支持这个写法,否则还是不应该轻易用。

其它注意事项请参看:font-family 没有设定中文字体时,汉字应该怎么显示?

渲染

当字体确定以后,就可以将文本,字体等等参数一起交给具体的排版引擎,生成字形和位置,然后根据不同的平台调用不同的字体rasertizer将自行转换成最后显示在屏幕上的图案,一般浏览器都会选择平台原生的resterizer

排版引擎

不同浏览器有着不同的渲染引擎。Mac OS X 用户使用 CoreText 渲染引擎,Windows7 和 Windows Vista 用户使用 DirectWrite.aspx) 或 GDI ,而 Windows XP 则使用 GDI。

GDI 分为 GDI Grayscale 和 GDI ClearType 。前者为灰阶渲染 API,后者是亚像素渲染 API。由于 GDI ClearType 并未对字体进行垂直方向的平滑,因此当字体较大时会出现边缘不平滑的情况。为了弥补 GDI ClearType 的不足,MS实现了 DirectWrite API,它在 GDI ClearType 的基础上增加了垂直方向的平滑。

对比图片来看看它们之间的区别,其中上图为FacitWeb字体,下图为 Minion Pro字体。

Core Text 渲染引擎

Core Text 渲染引擎

DirectWrite渲染引擎

DirectWrite渲染引擎

GDI渲染引擎,开启ClearType

GDI渲染引擎,开启ClearType

GDI渲染引擎,标准抗锯齿(Standard antialiasing)

GDI渲染引擎,标准抗锯齿(Standard antialiasing)

GDI渲染引擎,无抗锯齿(no antialiasing)

GDI渲染引擎,无抗锯齿(no antialiasing)

使用同一颜色,感官上的颜色深浅为:黑白渲染> grayscale > sub-pixel。

iOS 和 Mac 的渲染引擎一样,但采用的是灰度渲染,默认情况下亚像素抗锯齿是关闭的,但可以通知设置开启。

由于渲染策略的不同,字母a在不同的浏览器和 OS 下的渲染表现也不同。第一个是理想模型的a,第二个是灰阶渲染的a,第三个是亚像素渲染,第四个是黑白渲染。

浏览器

常用字体在浏览器中的渲染情况

浏览器支持表

注:从 chrome52 开始,google 停止对于老的操作系统的支持,包括 windows xp 和 windows vist a停止了 GDI 的字体渲染,从而只支持 DirectWrite。

光栅化

当确定了编码、字体类型、排版引擎、浏览器后,就要进行光栅化了,光栅化是将文字从一个向量表示(比如一个TrueType)转化到光栅或者位图表示的过程。在这个过程中往往涉及到一些抗锯齿技术使得屏幕上的字体更加顺滑易读,这也经常会涉及到“字体微调(font hinting)”技术。

建议

根据以上总结我们可以看出,不同系统预装的字体不同,不同浏览器的默认字体也不同,而且还有渲染引擎的差异。所以,要想达到比较好的显示效果,需要设置好font-family

  1. 首先确定要选择字体的元素应该使用的字体风格,比如是衬线字体、非衬线字体还是 cursivefantasy 之类的。

  2. 优先声明英文字体,比如 Mac OS X 下有 Helvetica 也有 Arial,但 Helvetica (可能) 效果更好,Windows 下则一般只有 Arial,那么写 Helvetica, Arial 就比 Arial, Helvetica 或者只有 Arial 更好。

    • 绝大部分中文字体都包含英文字母和数字,但是大多数中文字体中的英文和数字部分都不是特别漂亮,所以建议对英文字体先进行声明。

  3. 然后列出中文字体,Windows下,Microsoft Yahei是最常用的字体,Mac如果安装了Office,系统也会安装Microsoft Yahei字体,可Mac下Microsoft Yahei显示效果不是太好,所以一般把Mac的字体放在前面,Microsoft Yahei放在后面,最后还可以跟上Linux下的WenQuanYi Micro Hei

  4. 最后还应该放上对应的generic family,比如sans-serif或者serif

  5. 尽量用字体的基本名称 (比如 English locale 下显示的),而不要用本地化过的名称。除非特殊情况 (Windows 下“某些”浏览器在特定编码下只能支持本地化的字体名称)。Mac OS X 下字体名称可以用 Font Book 查到 (菜单 Preview -> Show Font Info),Windows 下字体信息在微软的网站可以得到,Linux/X11 下可以使用 fc-list 命令查到。

  6. 字体名称中包含空格时记得用引号扩起来,比如"WenQuanYi Micro Hei"

  7. 文档开头最好指明语言,比如<html lang="en-us">。但是对于简体中文来说,我们不应该使用lang=zh-cn,但是为了浏览器的兼容性,还继续使用。详细参见网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"?

基于以上考虑,我们先来看看最安全的的font-family是什么样的:

html lang=zh-CN//为了兼容性,暂时先这么写
charset=utf-8
font-family:arial,sans-serif;

扩充一下,加上常用的字体fallback:

PC端

font-family: -apple-system,BlinkMacSystemFont,"San Francisco","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Microhei",sans-serif;

移动端


   font-family:  "\5FAE\8F6F\96C5\9ED1", Helvetica;//手机腾讯
   font-family:'STHeiti','Microsoft YaHei',Helvetica,Arial,sans-serif;//手机网易

-apple-system用于调用系统默认UI字体,并且会根据font-weight声明选择恰当的变体。system将来有可能成为标准-apple为过渡阶段的厂商前缀。

BlinkMacSystemFont:为 macOS Chrome 应用系统 UI 字体,与上面等同。

一般移动端不需要设置中文字体,\5FAE\8F6F\96C5\9ED1是微软雅黑的Unicode码,中文测试用。

相关参考

给自己的字体课(一)

百用不厌明星字体

中文字体新手指南

中文字体分类除了黑体和宋体之外还有哪些?

讨论:中文字体及呈现需求

从《中文排版需求》开始

CSS font-family常见中文字体对应的英文名称

各个平台下相对比较好的 Web 英文字体分别是什么?

网页字体设置你了解吗?

移动开发规范概述

网页中字体的那些事

Web 字体的选择和运用

Python字符编码的学习

浏览器如何渲染文本

网站字体渲染过程

有关字体的小小迷思

Type rendering: operating systems

如何保证网页的字体在各平台都尽量显示为最高质量的黑体?

在 Web 内容中使用系统字体

Using UI System Fonts In Web Design: A Quick Practical Guide

Using the System Font in Web Content

对于 CSS 的「font-family」,浏览器是通过字体的哪个名称进行匹配的?

最佳 Web 中文默认字体

是否有一种软件能够对不同语言的文字指定不同的字体?

CSS Font Stack

查看原文

赞 8 收藏 26 评论 1

人丑就要多读书_ 分享了头条 · 2017-06-16

<p><p><p><p data-height="265" data-theme-id="0" data-slug-hash="QgGVjG" data-default-tab="result" data-user="rcjydds" data-embed-version="2" data-pen-title="QgGVjG" class="codepen">See the Pen QgGVjG by 小小小松鼠 (@rcjydds...

赞 0 收藏 0 评论 0

人丑就要多读书_ 发布了文章 · 2017-06-16

123

<iframe height='265' scrolling='no' title='QgGVjG' data-original='//codepen.io/rcjydds/embed/QgGVjG/?height=265&theme-id=dark&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen QgGVjG by 小小小松鼠 (@rcjydds) on CodePen.
</iframe>

查看原文

赞 0 收藏 0 评论 0

人丑就要多读书_ 发布了文章 · 2017-05-21

可视化效果(Visual effects)

Overflow and clipping

一般地,一个块盒的内容都被限制在该盒的content边内。某些情况下,一个盒可能会溢出,意味着它的部分内容或者全部内容位于该盒外部,例如:

  • 一行无法拆分,导致行盒比块盒宽

  • 一个块级盒对其包含块来说太宽了。当一个元素的width属性具有一个能让生成盒从包含块的边内溢出的值时,可能会发生这种情况

  • 一个元素的高度超出了为其包含块显式指定的高度(即,包含块的高度由height属性决定,而不是由内容高度)

  • 一个后代盒是绝对定位的,部分内容在该盒外部。这种盒并不一定会根据其祖先的overflow属性裁剪。特殊的,它们不会被介于自身和包含块之间的任意祖先的overflow裁剪

  • 一个后代盒具有负margin,导致它的部分内容被定为在该盒外部

  • text-indent属性让一个行盒挂在该块盒的left或者right边上

出现溢出时,overflow属性指定了一个盒是否应该被裁剪到其padding边内,以及是否需要提供一种滚动机制来访问所有被裁剪掉的内容

Overflow

overflow各种属性值的表现

在本例中,overflow:visible默认,对溢出不作处理;overflow:hidden对溢出部分进行隐藏;overflow:scroll对右边以及下边做出滚动条处理,不管元素是否溢出;overflow:auto对溢出部分做滚动条处理;overflow:inherit应该从父元素继承overflow属性的值

css3新特性

css3中增加了overflow-x以及overflow-y分别代表水平方向和垂直方向的overflow,这两个属性是相同值时,等同于overflow的属性值;这两个值一个非overflow:visible,一个为overflow:visible时,overflow:visible的属性值会变为
overflow:auto

overflow起作用的前提:

  1. display:inline水平

  2. 对应方位的尺寸限制.width/height/max-width/max-height/absolute拉伸

  3. 对于单元格td等,还需要tabletable-layout:fixed状态才行

对于ie7浏览器来说,使用overflow会有一些bug:

  1. 滚动条样式不同(这一条在win10中都一样)

  2. 宽度设定机制,对于子元素设置width:100%,ie7会按照父元素宽度计算,也就是400px,而子元素有垂直滚动条占据一部分空间,所以实际水平宽度不到400px,因此水平滚动条会出现
    解决方法是去掉width:100%

    <div class="box">
      <div class="content">
      </div>
    </div>
    
    .box{
      width: 400px;
      height: 100px;
      overflow: auto;
    }
    .content{
      width: 100%;
      height: 200px;
      background-color: #beceeb;
    }
    
    

    ie7浏览器下,文字越多,按钮两侧padding留白就越大,这时,给按钮样式添加overflow:visiable就能解决

Overflow与滚动条

滚动条出现的条件

  1. overflow:auto/overflow:scroll,html标签,textarea标签

  2. 子元素超出父元素限制

Body/Html与滚动条

在浏览器中,默认滚动条均来自<html>而不是<body>

原因:新建一个空白html,<body>默认.5em margin,如果滚动条来自<body>,则应该有边距,而不是靠着浏览器边缘

  • IE7-浏览器默认: html{ overflow-y:scroll}

  • IE8+浏览器默认: html{overflow:auto}

所以我们去除页面默认滚动条,只需要:

html{ overflow:hidden}

使用js获取滚动高度

  • Chrome浏览器是:document.body.scrollTop

  • 其他浏览器: document.documentElement.scrollTop

为了兼容性建议使用: var st=document.documentElement.scrollTop||document.body.scrollTop

Overflow的padding-bottom缺失现象

 .box{
  width: 400px;
  height: 100px;
  padding: 100px 0;
  overflow: auto;
  border: 1px solid #000;
}

上面的代码在Chrome浏览器中会出现padding-bottom,而在其它浏览器中都不会出现,这样就导致出现不一样的scrollHeight

滚动条的宽度

准确说法应该是滚动栏的宽度.下面方法可以简单获得:

.box{
  width: 400px;
  overflow:scroll;
}
.in{
  *zoom:1;
}
<div class="box">
  <div class="in" id="in">
  </div>
</div>
var a = console.log (400-document.getElementsById("in").clientWidth);

Overflow:auto的潜在布局隐患

滚动条会占用容器尺寸,原本和谐的布局,滚动条出现后可能会错位或者出现水平滚动条,在实现这种布局时一般使用自适应布局或者预留合适宽度

水平居中跳动问题

.container{width:1150px;margin:0 auto}

这种使用水平居中的布局,因为滚动条会占用一部分空间,所以滚动的时候会跳动,向左偏移滚动条宽度

水平居中跳动问题的修复

1.html{overflow-y:scroll}

这个解决方案唯一缺点就是不美观,会出现滚动条

2..container{padding-left:calc(100vw-100%);}
100vw-浏览器宽度; 100%-可用内容宽度;这个解决方案需要IE9+支持

Overflow与BFC

overflow:visible可以触发BFC

  1. 清除浮动影响

  2. 避免margin穿透问题

  3. 两栏自适应布局

1.overflow内部float无影响,IE6是不支持的,所以才有了广为流传的清除浮动方法:

清除浮动方法

3.overflow与两栏自适应布局

使用overflow实现两栏自适应布局

还有一种广为流传的实现两栏自适应布局的方法,使用table-cell

table-cell实现两栏自适应布局

Overflow与absolute

隐藏失效与滚动固定

在上面的例子中,一旦子元素设置为absolute,父元素的overflow属性会失效

绝对定位元素不总是被父级overflow属性裁剪,尤其当overflow在绝对定位元素及其包含块之间的时候

如何避免失效

  • overflow元素自身为包含块

  • overflow元素的子元素为包含块

  • 任意合法transform声明当作包含块

transform声明当作包含块

  • overflow元素自身transform

  • overflow子元素transform

避免失效例子

Overflow妙用

居中及边缘对齐定位

这里面的边缘对齐定位,使用的就是父元素overflow:hidden,子元素的&nbsp;被隐藏,后面的图片设置position:absolute使overflow对于图片的作用失效,从而实现滚动条上下滚动的边缘定位效果

依赖overflow的样式表现

CSS3有个属性名为resize,可以拉伸元素尺寸:

  • resize:both水平垂直两边拉

  • resize:horizontal只有水平方向拉伸

  • resize:vertical只有垂直方向拉伸

但是,此声明起作用的前提是元素不是overflow:visible

一些依赖overflow的样式表现

例1中,我们给button使用了一个overflow:hidden以及resize:both,button可以水平垂直拉伸
例2是一个textarea,因为它默认overflow:auto,所以它默认就能拉伸
例3是我们给段落一个overflow:hidden以及text-overflow:ellipsis,就会在最后显示...(省略号)

Overflow与锚点技术

锚点与锚链

在这个例子中,通过<a>#mm3(锚链)找到图片的id(锚点)来定位

锚点定位的本质就是:改变容器的滚动高度

需要满足的条件:

  1. 容器可滚动

  2. 锚点元素在容器内

动态图来演示一下

锚点定位的触发

  1. url地址中的锚链与锚点元素

  2. 可focus的锚点元素处于fcous态

锚点定位的作用

  1. 快速定位

  2. 锚点定位与overflow选项卡技术

overflow选项卡

在这个例子中,我们使用了锚点定位技术实现选项卡,并使用overflow:hidden隐藏溢出的选项卡

这种用法有一个不足之处,就是当我们在页面偏下位置时,当你切换选项卡的时候,它会定位到最外层的滚动条,体验很糟糕,所以一般用在单页场景

URL锚点HTML定位技术机制、应用与问题

无JavaScript纯CSS实现选项卡轮转切换效果

Clip&&clip-path

Clip

裁剪区域(clipping region)定义了一个元素border box的哪一部分是可见的。默认情况下,元素不会被裁剪。然而,裁剪区域可以通过clip属性显式地设置

clip的剪切例子

使用clip裁剪必须是absolute或者fixed元素,本例中没有逗号分隔的是兼容IE6/7版本

这张图片解释了clip的语法

rect(top,right,bottom,left);中的top,bottom是相对于盒子上边框边界的偏移,left,right是相对于盒子左边框边界的偏移

clip属性已经弃用,因为它的适用范围太小,只能用在绝对定位元素下,而且只能用于裁剪矩形,取而代之的是clip-path

Clip-path

clip-path,包括了一条闭合的矢量路径,它可以是CSS中定义的基础形状,也可以是包含了clipPath标签的SVG元素。在闭合路径内的内容会显示,而路径外边的都会被剪掉著作权归作者所有。

clip-path语法:

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

where

<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where

<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

where

<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box = border-box | padding-box | content-box

上面的语法表示的是:

  • clip-source会是一个剪切元素路径到一个SVG<clip-path>元素,这个元素可以是内部的或者外部的

  • basic-shape符合CSS Shapes specification定义的基础形状函数

  • geometry-box 可选项.如果同<basic-shape>一起声明,它将为基础形状提供相应的参考盒子.通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被border-radius定义的剪切路径)

clip-path语法实例

css-masking-1
clip-path css-tricks
clip-path MDN
Introducing the CSS clip-path Property
打破盒子模式的限制,使用Clip-Path创建响应式图形

Visibility

visibility属性有两种用法:

  1. 取值为hidden时隐藏元素,并将其所占空间用空白占位

  2. 取值为collapse时隐藏表格的一行或一列

查看原文

赞 0 收藏 4 评论 0

人丑就要多读书_ 发布了文章 · 2017-05-19

z-index

stacking context

层叠上下文(stacking context)是HTML中的一个三维的概念.如果一个元素含有层叠上下文,我们就可以理解为这个元素在Z轴上就"高人一等".

Z轴表示用户与屏幕之间并不存在的的垂直线,通俗点讲,就是人眼看屏幕的视线这条垂直于屏幕的线

拥有层叠上下文的元素包括:

  • 页面根元素天生具有层叠上下文,称之为"根层叠上下文"

  • z-index值为数值的定位元素也具有层叠上下文

  • 其他属性也可以具有层叠上下文

stacking level

层叠水平(stacking level),决定了同一个层叠上下文中元素在z轴上的显示顺序

普通元素的层叠水平优先由层叠上下文决定,因此层叠水平的比较只有在当前层叠上下文元素中才有意义

需要注意的是,千万不要把层叠水平和CSS的z-index属性混为一谈.没错,某些情况下z-index确实可以影响层叠水平,但是只限于定位元素以及flex/inline-flex子元素,而层叠水平所有的元素都存在

stacking order

层叠顺序(stacking order)是元素发生层叠时候有着特定的垂直显示顺序

注意,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则

clipboard.png

上图是著名的7阶层叠水平(stacking level)图

上图的层叠顺序inline/inline-block水平盒子(内容)>float浮动盒子以及block块状水平盒子(布局)>background/border(装饰),因为这样更符合页面加载的功能和视觉呈现

层叠顺序实例

在这个例子中,inline-block属性的红色div,inline属性span > float:left属性图片 > block属性绿色div.但是有一点,blockdiv的文字会在inline-blockdiv背景色的上面,因为background层叠顺序最低

z-index与stacking context

  1. 定位元素默认z-index:auto可以看成是z-index:0

  2. z-index不为auto的定位元素会创建层叠上下文(IE7除外,auto也会创建)

  3. z-index层叠顺序的比较止步于父级层叠上下文

三个实例

在第一个例子中,应用了position:relative属性的图片z-index:auto,层叠顺序大于普通inline-block元素,所以定位图片覆盖普通图片

在第二个例子中,父容器设置position:absolute,子元素图片设置position:relative,这时,我们给图片添加z-index:-1,图片跑到背景色后面了,原因是设置了z-index的图片的层叠上下文元素是页面根元素;这时,我们再给父容器添加z-index:0,图片的层叠上下文元素变为父容器,此时,图片又回到背景色之上,因为z-index:-1层叠水平在层叠上下文背景色之上

第三个例子中,虽然第一个子元素设置z-index:999999,第二个子元素z-index:-1,但是它们的层叠上下文起作用的是父元素的z-index,所以第一个图片被第二个图片覆盖

其它属性与层叠上下文

其它参与层叠上下文的属性:

  • z-index值不为autoflex项(父元素display:flex|inline-flex).

  • 元素的opacity值不是1.

  • 元素的transform值不是none.

  • 元素mix-blend-mode值不是normal.

  • 元素的filter值不是none.

  • 元素的isolation值是isolate.

  • position:fixed声明(IE不支持)

  • will-change指定的属性值为上面任意一个.

  • 元素的-webkit-overflow-scrolling设为touch.(移动端)

其它属性与stacking context实例

上面的实例展示了1-8条规则,我们设置8个div盒子,盒子里面放置了8张图片,然后给图片position:relative并且z-index:-1,这时,图片的层叠上下文元素是根层叠上下文,图片被背景色覆盖,然后我们在div盒子分别使用了8条规则,盒子变为层叠上下文,图片出现在背景色上面

这里有个问题,本来是8个图片,这里出现的只有7个,原因是同时存在transformposition:fixed的时候position:fixed失效,导致例7图片层叠上下文被覆盖

z-index与其它css属性层叠上下文

  1. 不依赖z-index的层叠上下文元素的层叠顺序均是z-index:auto级别

  2. 依赖z-index的层叠上下文元素的层叠顺序取决于z-index

依赖z-index值创建层叠上下文的情况:

  • position值为relative/absolute或者fixed(非IE浏览器)

  • display:flex|inline-flex容器的子flex

z-index与定位元素

这个例子中,我们先设置了一个图片层叠上下文,然后设置了一个父容器是flex,子元素z-index:1的层叠上下文;

这里,参与比较的是第一个图片层叠上下文,和flex的子元素图片层叠上下文,决定层叠顺序的是z-index的大小,也就是谁大谁在上面

层叠上下文导致的图片上的文字消失现象

这个例子有个现象,当动画在运行时,文字跑到图片后面去了,基于前面学到的东西,当opacity不为1时,是具有层叠上下文的,层叠级别跟z-index:auto一样,也就是跟absolute是同级的,基于谁大谁在上面的原则,图片会覆盖文字

解决方法:

  1. 调整DOM流先后顺序,将文字放在图片后面

  2. 提高文字的层叠顺序,例如z-index:1

z-index相关实践

1.最小化影响原则

目的:避免z-index嵌套层叠关系混乱

原因:

  1. 元素的层叠水平主要由所在的层叠上下文决定;

  2. IE7 z-index:auto也会新建层叠上下文;

做法:

  1. 避免使用定位属性;

  2. 定位属性从大容器平级分离为私有小容器

可以参考relative相关实践

2.尽量不使用z-index大于2

目的:避免z-index混乱,一个元素比一个元素z-index大的样式问题

原因:多人协作及后期维护

做法:
对于非浮动元素,避免设置z-index值,z-index值没有任何必要超过2

3.组件层级计数器

目的:避免浮层组件因z-index被覆盖的问题

原因:

  1. 总会遇到意想不到的高层级元素

  2. 组件的覆盖规则具有动态性,比如说一个页面有若干个弹框

做法:通过JS获得body下子元素的最大z-index

4.负值z-index与可访问性隐藏

使用可访问性隐藏来解决表单提交按钮低版本浏览器兼容性问题

在本例中,可以使用z-index:-1隐藏原始的submit而使用美化过的label控制提交;如果不需要兼容低版本浏览器可以直接使用display:none

深入理解CSS中的层叠上下文和层叠顺序

查看原文

赞 1 收藏 1 评论 0

认证与成就

  • 获得 27 次点赞
  • 获得 19 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 18 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-02-09
个人主页被 788 人浏览