标签 CSS 下的文章

使用 CSS 让你的 HTML 项目更具风格。

当你编写文档时,无论是为开源项目还是技术写作项目,你都应该有两个目标:文档应该写得好,同时要易于阅读。前者通过清晰的写作技巧和技术编辑来解决。第二个目标可以通过对 HTML 文档进行一些简单的更改来解决。

超文本标记语言(HTML)是互联网的支柱。自 1994 年“万维网”问世以来,所有网络浏览器都使用 HTML 来显示文档和网站。几乎与此同时,HTML 一直支持样式表,它是对 HTML 文档的一种特殊添加,用于定义文本在屏幕上的呈现方式。

单纯用 HTML 编写项目文档也是可以的。然而,纯 HTML 样式可能感觉有点简陋。因此,尝试向 HTML 文档添加一些简单的样式,为文档添加一点活力,并使文档更清晰、更易于阅读。

定义一个 HTML 文档

让我们从一个纯 HTML 文档开始,探索如何向其添加样式。一个空的 HTML 文档在顶部包含 <!DOCTYPE html> 定义,后面跟着一个 <html> 块来定义文档本身。 在 <html> 元素中,你还需要加上一个文档标头,其中包含有关文档的元数据,例如标题。文档正文的内容放在父 <html> 块内的 <body> 块中。

你可以使用以下 HTML 代码定义一个空白页面:

<!DOCTYPE html>
<html>
  <head>
    <title>这是一个新文档</title>
  </head>
  <body>

  </body>
</html>

在另一篇关于 用 HTML 编写项目文档 的文章中,我将一个开源棋盘游戏的自述文件从纯文本更新为 HTML 文档,并使用一些基本的 HTML 标记,如 <h1><h2> 作为标题和副标题,<p> 用于段落,<b><i> 用于粗体和斜体文本。让我们从那篇文章结束的地方继续讲:

<!DOCTYPE html>
<html>
  <head>
    <title>简易 Senet</title>
  </head>
  <body>
    <h1>简易 Senet</h1>
    <h2>游戏玩法</h2>
    
    <p>游戏会自动为你“投掷”投掷棒,并在屏幕右下角显示结果。</p>
    
    <p>如果“投掷”结果为零,你失去本轮机会。</p>
    
    <p>轮到你的时候,游戏会自动选择
    你在棋盘上的第一块棋子。 你不一定
    能够用这个棋子走棋,所以选择你的棋子
    移动,然后按 <i>Space</i>(或 <i>Enter</i>)移动
    它。 你可以通过几种不同的方法进行选择:</p>
    
    <ul>
      <li><i>向上</i>/<i>向下</i>/<i>向左</i>/<i>向右</i> to
      朝特定方块移动。</li>
    
      <li>加号 (<b>+</b>) 或减号 (<b>-</b>) 使棋子在棋盘上向“左”或向“右”移动。
      请注意,它们会自动遵循棋盘的“倒过来的 S”方向移动。</li>
    
      <li><em>Tab</em>在棋盘上选择下一个你想要移动的棋子。</li>
    </ul>
    
    <p>要随时退出游戏,请按 <b>Q</b>(大写
    Q)或按 <i>Esc</i>,这样游戏会提示你是否想要
    放弃比赛。</p>
    
    <p>如果你比对手更快将所有棋子移出棋盘,你就赢得了比赛。
    这同时需要运气和游戏策略!</p>
  </body>
</html>

此 HTML 文档演示了利用 HTML 的技术写作者经常使用的一些块和内联元素。块元素在围绕文本定义一个矩形。段落和标题就是块元素,因为它们从文档的左边缘延伸到右边缘。例如,<p> 在段落周围包含一个不可见的矩形。相比之下,内联元素的使用则紧跟在它们包围的文本。如果你在段落中的某些文本上使用 <b>,则只有被 <b></b> 包围的文本会变为粗体。

你可以将直接样式应用于此文档以更改字体、颜色和其他文本样式,但修改文档外观的更有效方法是将样式表应用于文档本身。你可以在 <head> 元素中使用其他元数据执行此操作。你可以为样式表引用文件,但在这个例子中,我使用 <style> 块在文档中定义样式表。以下是带有空样式表的 <head>

<!DOCTYPE html>
<html>
  <head>
    <title>简易 Senet</title>
    <style>

    </style>
  </head>
  <body>
    ...
  </body>
</html>

定义样式

由于你刚刚开始学习样式表,因此这里先演示一种基本样式:背景色。我喜欢从背景颜色开始,因为它有助于演示块和内联元素。让我们应用一个有点华丽的样式表,为所有 <p> 段落设置浅蓝色背景颜色,为 <ul> 无序列表设置浅绿色背景。对任何粗体文本使用黄色背景,对任何斜体文本使用粉红色背景。

你可以在 HTML 文档的 <style> 块中使用样式来定义这些样式。样式表使用与 HTML 文档不同的标记。样式语法看起来像 element { style; style; style; ... } 并使用花括号将多种文本样式组合到一个定义中。

<style>
p { background-color: lightblue; }
ul { background-color: lightgreen; }

b { background-color: yellow; }
i { background-color: pink; }
    </style>

请注意,每个样式都以分号结尾。

如果在网页浏览器中查看此 HTML 文档,你可以看到 <p><ul> 块元素如何填充为矩形,而 <b><i> 内联元素仅突出显示粗体和斜体文本。 这种对比色的使用可能看起来不太好看,但我想你可以清楚看到块和内联元素:

辣眼睛!但是这些颜色确实能帮助我么更好地看出块和內联元素的区别。

应用样式

你可以使用样式使这个自述文件更易于阅读。 因为你刚刚开始学习样式,还是先只用一些简单的样式元素:

  • background-color 设置背景颜色
  • color 设置文字颜色
  • font-family 使用不同的文本字体
  • margin-top 在元素上方添加空间
  • margin-bottom 在元素下方添加空间
  • text-align 改变文本的对齐方式,例如靠左、靠右或居中

让我们重新开始你的样式表并将这些新样式应用到文档中。首先,在文档中使用更令人愉悦的字体。如果你的 HTML 文档没有指定字体,网络浏览器会为你选择一种。根据浏览器的设置方式,这可能是衬线字体(如我的屏幕截图中使用的字体)或无衬线字体。衬线字体在每个字母上添加了一个小笔画,这样在打印时更容易阅读。无衬线字体缺少这种额外的笔划,这使得文本在计算机显示器上显得更清晰。常见的衬线字体包括 Garamond 或 Times New Roman。 流行的无衬线字体包括 Roboto 和 Arial。

例如,要将文档正文字体设置为 Roboto,你可以使用以下样式:

body { font-family: Roboto; }

通过设置字体,你假设查看文档的人也安装了该字体。有些字体已经十分常见,以至于它们被认为是事实上的“网页安全”字体。 这些字体包括 Arial 等无衬线字体和 Times New Roman 等衬线字体。Roboto 是一种较新的字体,可能还无法随处可用。因此,网页设计师通常不会只列出一种字体,而是设置一种或多种“备用”字体。你可以通过用逗号分隔来添加这些替代字体。 例如,如果用户的系统上没有 Roboto 字体,你可以使用以下样式定义将 Arial 字体用作文本正文:

body { font-family: Roboto, Arial; }

所有网络浏览器都定义了默认的衬线和无衬线字体,你可以使用这些名称来引用它们。用户可以更改他们喜欢用于显示衬线和无衬线的字体,因此不太可能对每个人都一样,但在字体列表中使用 serifsans-serif 通常是个好主意。通过添加该字体,至少用户可以大致了解你希望 HTML 文档的呈现方式:

body { font-family: Roboto, Arial, sans-serif; }

如果字体名称不止一个单词,则你必须在其两边加上引号。HTML 允许你在此处使用单引号或双引号。 为标题和副标题定义一些衬线字体,包括 Times New Roman:

h1 { font-family: "Times New Roman", Garamond, serif; }
h2 { font-family: "Times New Roman", Garamond, serif; }

请注意,H1 标题和 H2 副标题使用完全相同的字体定义。如果你想避免无谓的打字,可以使用样式表快捷方式为 H1 和 22 使用相同的样式定义:

h1, h2 { font-family: "Times New Roman", Garamond, serif; }

在编写文档时,许多技术作者更喜欢将主标题放在页面的中央。你可以在块元素(例如 H1 标题)上使用 text-align 来使标题居中:

h1 { text-align: center; }

为了让粗体和斜体文本更突出,请将它们置于稍微不同的颜色中。对于某些文档,我可能会使用深蓝表示粗体文本,使用深绿表示斜体文本。这些颜色非常接近黑色,但颜色的细微差别足以吸引读者的注意力。

b { color: darkblue; }
i { color: darkgreen; }

最后,我更喜欢在我的列表元素周围添加额外的间距,以使它们更易于阅读。如果每个列表项只有几个词,额外的空间可能无关紧要。但是我的示例文本中的中间项很长,可以换到第二行。 额外的空间有助于读者更清楚地看到此列表中的每个项目。 你可以使用边距样式在块元素上方和下方添加空间:

li { margin-top: 10px; margin-bottom: 10px; }

这种样式定义了一个距离,此处我将其指定为每个列表元素上方和下方的 10px(十个像素)。 你可以使用多种不同的距离度量。十像素实际上就是屏幕上十个像素的空间,无论是台式机显示器、笔记本电脑显示屏,还是手机或平板电脑屏幕。

假设你真的只是想在列表元素之间添加一个额外的空行,你也可以使用 em 来测量。em 是一个旧的排版术语,如果你指的是左右间距,它就是大写 M 的宽度,或者对于垂直间距,就是大写 M 的高度。所以你可以改用 1em 来写边距样式:

li { margin-top: 1em; margin-bottom: 1em; }

HTML 文档中的完整样式列表如下所示:

<!DOCTYPE html>
<html>
  <head>
    <title>简易 Senet</title>
    <style>
      body { font-family: Roboto, Arial, sans-serif; }
      h1, h2 { font-family: "Times New Roman", Garamond, serif; }
      h1 { text-align: center; }
      b { color: darkblue; }
      i { color: darkgreen; }
      li { margin-top: 1em; margin-bottom: 1em; }
    </style>
  </head>
  <body>
    <h1>简易 Senet</h1>
    <h2>游戏玩法</h2>
    
    <p>游戏会自动为你“投掷”投掷棒,并在屏幕右下角显示结果。</p>
    
    <p>如果“投掷”结果为零,你失去本轮机会。</p>
    
    <p>轮到你的时候,游戏会自动选择
    你在棋盘上的第一块棋子。 你不一定
    能够用这个棋子走棋。所以选择你的棋子
    移动,然后按 <i>Space</i>(或 <i>Enter</i>)移动
    它。 你可以通过几种不同的方法进行选择:</p>
    
    <ul>
      <li><i>向上</i>/<i>向下</i>/<i>向左</i>/<i>向右</i> to
      朝特定方块移动。</li>
    
      <li>加号 (<b>+</b>) 或减号 (<b>-</b>) 使棋子在棋盘上向“左”或向“右”移动。
      请注意,它们会自动遵循棋盘的“倒过来的 S”方向移动。</li>
    
      <li><em>Tab</em>在棋盘上选择下一个你想要移动的棋子。</li>
    </ul>
    
    <p>要随时退出游戏,请按 <b>Q</b>(大写
    Q)或按 <i>Esc</i>,这样游戏会提示你是否想要
    放弃比赛。</p>
    
    <p>如果你比对手更快将所有棋子移出棋盘,你就赢得了比赛。
    这同时需要运气和游戏策略!</p>
  </body>
</html>

在网页浏览器上查看时,你会看到采用无衬线字体的自述文件,标题和副标题使用衬线字体。 页面标题居中。粗体和斜体文本使用略有不同的颜色来吸引读者的注意力而不会分散注意力。 最后,列表项周围有额外的空间,使每个项目更易于阅读。

通过添加一些样式,我们使这个自述文件更易于阅读。

这是在技术写作中使用样式的简单介绍。掌握了基础知识后,你可能会对 Mozilla 的 HTML 指南 感兴趣。它包括一些很棒的初学者教程,因此你可以学习如何创建自己的网页。

有关 CSS 样式的更多信息,我推荐 Mozilla 的 CSS 指南

(题图: MJ:web internet traffic design)


via: https://opensource.com/article/22/8/css-html-project-documentation

作者:Jim Hall 选题:lkxed 译者:XiaotingHuang22 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。

 title=

你可能已经熟悉 媒体查询 media query 了。它们被广泛地用于使网站具有响应性。widthheight 属性包含视区的尺寸。然后,你可以使用 CSS 在不同的尺寸下呈现不同的布局。

prefers-color-scheme 媒体查询 的工作方式与此相同。用户可以将他们的操作系统配置为使用浅色或深色主题。prefers-color-scheme 包含这个值。该值是 lightdark ,尽管 W3C 规范指出它可能支持未来的值,如 sepia。我为这两种模式指定不同的 CSS 变量值,让用户的操作系统来决定。

prefers-color-scheme 媒体查询

prefers-color-scheme 媒体查询的两种变化是:

/* Light mode */
@media (prefers-color-scheme: light) {
   :root {
       --body-bg: #FFFFFF;
       --body-color: #000000;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的 CSS 中,--body-bg--body-colorCSS 变量。正如你所看到的,它们对两种模式都包含不同的值。在浅色主题中,我设置了一个白色背景和黑色文本。在深色主题中,我设置了黑色背景和白色文本。

因为规范说 W3C 可能会引入未来的值,所以把这个 CSS 转换为默认值是有意义的。

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的代码中,我默认定义了一个浅色主题,如果媒体查询是 dark,则将其转换为深色主题。这样一来,以后任何添加到媒体查询的值都会默认设置为浅色主题。

使用 CSS 变量

现在我为不同的主题设置了不同的值,我需要实际使用它们来设计页面。

body {
   background: var(--body-bg);
   color: var(--body-color);
}

var() 语法 是 CSS 使用变量的方式。在上面的代码中,我是说把 background 设置为 --body-bg 的值,把 color 设置为 --body-color 的值。注意,这些变量的值来自媒体查询。这意味着背景和前景的颜色是根据操作系统的设置而改变的!

这就是媒体查询的真正能力。提供一个从操作系统到网页的一致的用户体验。

如果你进入 findmymastodon.com,并切换你的操作系统的主题,你会看到从一个主题到另一个主题的过渡。

CSS 工作组 网站也使用同样的媒体查询。改变你的操作系统主题,网站就会切换主题来进行调整。

结论

请注意,使用 prefers-color-scheme 与使用普通的编程语言没有什么不同。我定义了一些变量,这些变量的值根据一些逻辑而改变。而这些变量然后被用于进一步的操作。

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。而且,为了用户的利益,它进一步模糊了桌面和网络之间的界限。最新的浏览器版本 支持 prefers-color-scheme,所以你今天就可以开始实验了。

编码愉快。

这篇文章最初发表在 作者的网站 上,经许可后重新发表。


via: https://opensource.com/article/21/10/dark-themes-websites

作者:Ayush Sharma 选题:lujun9972 译者:geekpi 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

探索开源 CSS 框架,找到适合你的项目的框架。

当大多数人想到 Web 开发时,通常会想到 HTML 或 JavaScript。他们通常会忘记对网站的欣赏能力有更大影响的技术: 级联样式表 cascading style sheets (简称 CSS)。据维基百科的说法,CSS 既是网页中最重要的部分,也是最常被遗忘的部分,尽管它是万维网的三大基石技术之一。

本文将探讨九种流行的、强大的、开源的框架,是这些框架让构建漂亮的网站前端的 CSS 开发变得简单明了。

名称介绍许可证
Bootstrap最流行的 CSS 框架,来自 TwitterMIT
PatternFly开源框架,来自 Red HatMIT
MDC WebMaterial Design 组件开源框架,来自 GoogleMIT
Pure开源框架,来自 YahooBSD
Foundation前端框架,来自 Zurb 基金会MIT
Bulma现代 CSS 框架,基于 FlexboxMIT
Skeleton轻量级 CSS 框架MIT
Materialize基于 Material Design 的 CSS 框架MIT
Bootflat开源 Flat UI 工具,基于 Bootstrap 3.3.0MIT

Bootstrap

Bootstrap 无疑是最流行的 CSS 框架,它是所有前端 Web 设计的开端。Bootstrap 由 Twitter 开发,提供了可用性、功能性和可扩展性。

 title=

Bootstrap 还提供了大量的例子来帮助你入门。

 title=

使用 Bootstrap,你可以将不同的组件和布局拼接在一起,创造出有趣的页面设计。它还提供了大量详细的文档。

 title=

Bootstrap 的 GitHub 仓库有超过 19000 个提交和 1100 个贡献者。它基于 MIT 许可证,所以(和这个列表中的所有框架一样)你也可以加入并贡献。

 title=

PatternFly

PatternFly 是由 Red Hat 开发的一个开源的(MIT 许可证)CSS 框架。PatternFly 采取了与 Bootstrap 不同的方法:Bootstrap 是为任何对创建一个漂亮网站感兴趣的人而设计的,而 PatternFly 主要针对企业级应用开发者,它提供的组件,如条形图、图表和导航,对于创建强大的、指标驱动的仪表盘非常有吸引力。事实上,Red Hat 在其产品(如 OpenShift)的设计中也使用了这个 CSS 框架。

 title=

除了静态 HTML 之外,PatternFly 还支持 ReactJS 框架,ReactJS 是 Facebook 开发的一个流行的 JavaScript 框架。

 title=

PatternFly 有许多高级组件,如条形图、图表、模态窗口和布局等,适用于企业级应用。

 title=

PatternFly 的 GitHub 页面列出了超过 1050 个提交和 44 个贡献者。PatternFly 得到了很多人的关注,欢迎大家踊跃贡献。

 title=

MDC Web

凭借其大获成功的安卓平台,谷歌以一个名为 Material Design 的概念制定了自己的标准设计准则。Material Design 标准旨在体现在所有谷歌的产品中,这些标准也可以面向大众,并且在 MIT 许可证下开源。

 title=

Material Design 有许多“用于创建用户界面的交互式构建块”的组件。这些按钮、卡片、背景等可用于创建网站或移动应用程序的任何类型的用户界面。

 title=

维护人员为不同的平台提供了详尽的文档。

 title=

还有分步教程,其中包含用于实现不同目标的练习。

 title=

Material 组件的 GitHub 页面承载了面向不同平台的存储库,包括用于网站开发的 Material Web 组件(MDC Web)。MDC Web 有超过 5700 个提交和 349 个贡献者。

 title=

Pure

Bootstrap、Patternfly 和 MDC Web 都是非常强大的 CSS 框架,但是它们可能相当的笨重和复杂。如果你想要一个轻量级的 CSS 框架,它更接近于自己编写 CSS,但又能帮助你建立一个漂亮的网页,可以试试 Pure.css。Pure 是一个轻量级的 CSS 框架,它的体积很小。它是由 Yahoo 开发的,在 BSD 许可证下开源。

 title=

尽管体积小,但 Pure 提供了建立一个漂亮网页的很多必要的组件。

 title=

Pure 的 GitHub 页面显示它有超过 565 个提交和 59 个贡献者。

 title=

Foundation

Foundation 号称是世界上最先进的响应式前端框架。它提供了先进的功能和教程,用于构建专业网站。

 title=

该框架被许多公司、组织甚至政客使用,并且有大量的文档可用。

 title=

Foundation 的 GitHub 页面显示有近 17000 个提交和 1000 个贡献者。和这个列表中的大多数其他框架一样,它也是在 MIT 许可证下提供的。

 title=

Bulma

Bulma 是一个基于 Flexbox 的开源框架,在 MIT 许可证下提供。Bulma 是一个相当轻量级的框架,因为它只需要一个 CSS 文件。

 title=

Bulma 有简洁明快的文档,让你可以很容易地选择你想要探索的主题。它也有很多网页组件,你可以直接拿起来在设计中使用。

 title=

Bulma 的 GitHub 页面列出了 1400 多个提交和 300 多个贡献者。

 title=

Skeleton

如果连 Pure 都觉得太重了,那么还有一个叫 Skeleton 的更轻量级框架。Skeleton 库只有 400 行左右的长度,而且这个框架只提供了开始你的 CSS 框架之旅的基本组件。

 title=

尽管它很简单,但 Skeleton 提供了详细的文档,可以帮助你马上上手。

 title=

Skeleton 的 GitHub 列出了 167 个提交和 22 个贡献者。然而,它不是很活跃,它的最后一次更新是在 2014 年,所以在使用之前可能需要一些维护。由于它是在 MIT 许可证下发布的,你可以自行维护。

 title=

Materialize

Materialize 是一个基于 Google 的 Material Design 的响应式前端框架,带有由 Materialize 的贡献者开发的附加主题和组件。

 title=

Materialize 的文档页面非常全面,而且相当容易理解。它的组件页面包括按钮、卡片、导航等等。

 title=

Materialize 是 MIT 许可证下的开源项目,它的 GitHub 列出了超过 3800 个提交和 250 个贡献者。

 title=

Bootflat

Bootflat 是由 Twitter 的 Bootstrap 衍生出来的一个开源 CSS 框架。与 Bootstrap 相比, Bootflat 更简单,框架组件更轻量级。

 title=

Bootflat 的文档几乎像是受到了宜家的启发 —— 它显示的是每个组件的图片,没有太多的文字。

 title=

Bootflat 是在 MIT 许可证下提供的,其 GitHub 页面包括 159 个提交和 8 个贡献者。

 title=

你应该选择哪个 CSS 框架?

对于开源的 CSS 框架,你有很多选择,这取决于你想要的工具功能有多丰富或简单。就像所有的技术决定一样,没有一个正确的答案,只有在给定的时间和项目中才有正确的选择。

尝试一下其中的一些,看看要在下一个项目中使用哪个。另外,我有没有错过任何有趣的开源 CSS 框架?请在下面的评论中分享你的反馈和想法。


via: https://opensource.com/article/20/4/open-source-css-frameworks

作者:Bryant Son 选题:lujun9972 译者:wxy 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

欢迎回到我们为了构建更快网页所写的系列文章。本系列的第一部分第二部分讲述了如何通过优化和替换图片来减少浏览器脂肪。本部分会着眼于在 CSS(层叠式样式表)和字体中减掉更多的脂肪。

调整 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.cssfont-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中国 荣誉推出