整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
译自： https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者： Sirko Kemter
译者： David Dai
欢迎回到我们为了构建更快网页所写的系列文章。本系列的 第一部分 和 第二部分 讲述了如何通过优化和替换图片来减少浏览器脂肪。本部分会着眼于在 CSS（ 层叠式样式表 ）和字体中减掉更多的脂肪。
首先，我们先来看看问题的源头。CSS 的出现曾是技术的一大进步。你可以用一个集中式的样式表来装饰多个网页。如今很多 Web 开发者都会使用 Bootstrap 这样的框架。
这些框架当然方便，可是很多人都会将整个框架直接复制粘贴走。Bootstrap 非常大：目前 Bootstrap 4.0 的“最小”版本也有 144.9 KB. 在这个以 TB 来计数据的时代，它可能不算多。但就像所说的那样，一头小牛也能搞出大麻烦。
我们回头来看 getfedora.org 的例子。我们在 第一部分 中提过，第一个分析结果显示 CSS 文件占用的空间几乎比 HTML 本身还要大十倍。这里显示了所有用到的样式表：
那是九个不同的样式表。其中的很多样式在这个页面中并没有用上。
Font-awesome CSS 代表了包含未使用样式的极端。这个页面中只用到了这个字体的三个字形。如果以 KB 为单位，getfedora.org 用到的 font-awesome CSS 最初有 25.2 KB. 在清理掉所有未使用的样式后，它只有 1.3 KB 了。这只有原来体积的 4% 左右！对于 Bootstrap CSS，原来它有 118.3 KB，清理掉无用的样式后只有 13.2 KB，这就是差异。
下一个问题是，我们必须要这样一个 bootstrap.css 和 font-awesome.css 吗？或者，它们能不能合起来呢？没错，它们可以。这样虽然不会节省更多的文件空间，但浏览器成功渲染页面所需要发起的请求更少了。
最后，在合并 CSS 文件后，尝试去除无用样式并缩小它们。这样，它们只有 4.3 KB 大小，而你省掉了 10.1 KB.
不幸的是，在 Fedora 软件仓库中，还没有打包好的缩小工具。不过，有几百种在线服务可以帮到你。或者，你也可以使用 CSS-HTML-JS Minify ，它用 Python 编写，所以容易安装。现在没有一个可用的工具来净化 CSS，不过我们有 UnCSS 这样的 Web 服务。
CSS3 带来了很多开发人员喜欢的东西。它可以定义一些渲染页面所用的字体，并让浏览器在后台下载。此后，很多 Web 设计师都很开心，尤其是在他们发现了 Web 设计中图标字体的用法之后。像 Font Awesome 这样的字体集现在非常流行，也被广泛使用。这是这个字体集的大小：
current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2
所以问题是，你需要所有的字形吗？很可能不需要。你可以通过 FontForge 来去除这些无用字形，但这需要很大的工作量。你还可以用 Fontello . 你可以使用公共实例，也可以配置你自己的版本，因为它是自由软件，可以在 Github 上找到。
这种自定义字体集的缺点在于，你必须自己来托管字体文件。你也没法使用其它在线服务来提供更新。但与更快的性能相比，这可能算不上一个缺点。
现在，你已经做完了所有对内容本身的操作，来最大限度地减少浏览器加载和解释的内容。从现在开始，只有服务器的管理技巧才才能帮到你了。
有一个很简单，但很多人都做错了的事情，就是使用一些智能缓存。比如，CSS 或者图片文件可以缓存一周。但无论如何，如果你用了 Cloudflare 这样的代理服务或者自己构建了代理，首先要做的都应该是缩小页面。用户喜欢可以快速加载的页面。他们会（默默地）感谢你，服务器的负载也会更小。
via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/
作者： Sirko Kemter 选题： lujun9972 译者： StdioA 校对： wxy
本文由 LCTT 原创编译， Linux中国 荣誉推出
天逛codepen的时候发现了一个不错的文字动画效果，如此丝滑飘逸的效果必须得研究研究，可以看到字体粗细切换过渡效果很均匀，不像我们平常使用字体时设置 font-weight 的效果，日常设置字重的时候并不是每个值都会生效，只会有几个区间的值是可用的，以下代码给6个p标签设置font-weight 从 100 到 600：
@for $i from 1 through 6 {
p:nth-child(#{$i}) {
font-weight: 100 + 100 * ($i - 1);
}
}
可以看到并不是每个阶段字重都有变化的，当然这和不同的字体和是否中英文有一定的关系，但是设置字重的效果都是不够理想的状态。
这里就要引出今天文章所讲的可变字体了，基于可变字体（font-variation）将不再有这种困扰，当然也会有一定的弊端。
可变字体（Variable Fonts），也称为多轴字体、自由度字体或超级字体，是一种新兴的字体技术，它是一种可以在多个自由度上进行动态调整的字体格式。与传统字体不同的是，「可变字体能够在单个字体文件中包含多种字重、宽度、倾斜和其他轴的变体，而不需要使用多个不同的字体文件」。
简单理解可变字体就是通过使用可变字体，所有字重、字宽、斜体等情况的组合都可以被装在一个文件中。相应的弊端就是这个文件可能比常规的单个字体文件更大了。
可变字体支持使用font-variation-settings属性来控制字体的各种轴，通过调整这些轴的值，可以实现自定义字体样式的效果。
以下设置一个可变字体的粗细从 100 到 600，
font-variation-settings: "wght" 100, "ital" 0;
可以看到这次的字体是均匀的变化粗细，就如同设置 font-weight: 100到 font-weight: 600 的逐渐变化。
可变字体浏览器兼容情况，可以看到基本的浏览器都已经支持。
这个是根据字体的设计者来决定，字体的设计提供了各种各种可以被修改的轴，比如粗细，长短以及任何合理范畴之内的。下面提供几个常用的保留轴:
如果你想要使用它，你首先要找到相关字体资源。在这个网站 v-fonts.com 你能找到很多可变字体，很多都是在github开源，并且可以直接下载的。
通过@font-face引入到页面内：
@font-face {
font-family: 'VennVF';
src: url('VennVF_W.woff2') format('woff2-variations'),
url('VennVF_W.woff2') format('woff2');
}
每个可变字体都有不同的轴和不同的范围，如果你不知道可变字体能做什么改变，你可以使用这个（wakamaifondue.com）在线工具，可以帮你生成现成的css使用。
目前可以通过font-variation-settings属性，我们可以方便地控制自定义字体的不同轴，比如设置如下代码：
p {
font-family: "VennVF";
font-variation-settings: "wght" 550, "wdth" 125;
}
这段代码改变字体粗细为550，还有宽窄为125。在未来可能可以使用以下属性来得到同样的效果：
p {
font-family: "VennVF";
font-weight: 550;
font-stretch: 125%;
}
如下所示是一个例子：
h1 {
font-family: 'Inter Variable', sans-serif;
font-variation-settings:
"wght" 700,
"ital" 1,
"opsz" 48;
}
在这个例子中，我们将可变字体‘Inter’设置为700字重、1倾斜度和48像素字号的标题字体。可以看到，通过font-variation-settings属性，我们可以方便地控制自定义字体的不同轴，实现更加细腻、灵活的排版效果。
首图的字体有如同呼吸，飘逸的感觉，核心是基于可变字体改变字体的粗细，并给不同的字符增加不同的延迟动画效果即可达到最终的效果。
@keyframes change {
0% {
font-variation-settings: "wght" 900, "ital" 1;
}
50% {
font-variation-settings: "wght" 100, "ital" 0;
}
100% {
font-variation-settings: "wght" 900, "ital" 1;
}
}
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: change;
transition-timing-function: ease-in-out;
@for $line from 1 through 4 {
@for $letter from 1 through 10 {
&:nth-child(#{$line}) span:nth-child(#{$letter}) {
animation-delay: #{$letter * 0.1s + $line * 0.2s};
}
}
}
代码并不多，但实现的效果很不错，基于可变字体设计，我们可以实现更加智能、美观、易读的排版效果，让文字内容更加生动、丰富。
在线效果预览：https://code.juejin.cn/pen/7234826432050888765
以下是一些看到的案例效果，供大家参考。
国内常用的中文字体思源黑体也支持可变字体。
这个Google动画和本文头图的效果类似，给不同的字符加了不同的延迟加粗字体动画。
这个效果通过改变不同单词的可变字体的字重和宽窄呈现出一种不一样的效果。
以下的几个效果图都来源于v-fonts.com，诸如此类的效果还有很多，总共可变字体有三百多个，大家有兴趣的可以去找找看。
通过改变animation值可以让小图标动起来，是不是打开了很多新的思路。
这个字体比较有特色，大写字母是在上方有一根长长的线，小写字母是在下方有一根线，通过调整tracking轴的数值可以改变横线的长度。
这个字体就是一条波浪线，通过调整Width轴可以改变波浪的大小和幅度，都可以基于这个可变字体做水波纹效果了。
关于可变字体的详细介绍使用大家可以看这篇文章 「variable fonts - 更小更灵活的字体」。可变字体的设计让文字内容更加生动、丰富，有兴趣的朋友可以试试看～
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
「专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）」
variable fonts - 更小更灵活的字体：github.com/FoxDaxian/memory/issues/4
Variable Font Animation： codepen.io/typeforward/pen/abRpoxV
天我们来学习如何用 CSS 字体属性定义字体，加粗，大小，文字等样式。
serif 和 sans-serif 字体之间的区别
在计算机屏幕上，sans-serif 字体被认为是比 serif 字体容易阅读。
CSS字型
在CSS中，有两种类型的字体系列名称：
通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）
字体系列
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
多个字体系列是用一个逗号分隔指明。
代码如下
p{font-family:"Times New Roman", Times, serif;}
字体样式
字体样式主要是用于指定斜体文字的字体样式属性。这个属性有三个值：
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
代码如下
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。font-size 属性用来设置文本的大小。
请务必使用正确的HTML标签，就 <h1> - <h6> 表示标题和 <p> 表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：
设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用。
相对大小：
相对于周围的元素来设置大小，允许用户在浏览器中改变文字大小。
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
设置字体大小像素
设置文字的大小与像素，让你完全控制文字大小。
代码如下
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。
虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
代码如下
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
使用百分比和EM组合
在所有浏览器的解决方案中，设置 <body> 元素的默认字体大小的是百分比。
代码如下
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
所有CSS字体属性
今天大家学会了吗?没学会可以私信小编"666"
*请认真填写需求信息，我们会在24小时内与您取得联系。
