多彩的排版实验 | CSS-Tricks

最近有一些有趣的、突破边界的与排版相关的实验。我试图想出一个像“下沉线中的某些东西”这样的笑话，但我就是找不到一个能独立支撑且不易被反驳的笑话。

Codrin Pavel 创建了一种名为 CSSans 的引人入胜的多色字体，由他的姐姐 Izabela Andronache 设计！

Output of using CSSans Pro, geographic shapes in multiple colors combined to make letterforms.

它不是“字体”，因为字体是一个文件，比如“lato.woff2”或其他什么。这是一个 CSS 文件，你可以这样在其中编写

<div class="cssans cssans--center">
    <div class="cssans__accessible">Cool News</div>

    <div class="cssans__word">
        <b class="cssans:C"></b>
        <b class="cssans:o"></b>
        <b class="cssans:o"></b>
        <b class="cssans:l"></b>
    </div>

    <div class="cssans__word">
        <b class="cssans:N"></b>
        <b class="cssans:e"></b>
        <b class="cssans:w"></b>
        <b class="cssans:s"></b>
    </div>
</div>

请注意顶部的特殊<div>包含了完整的单词，而那些空的<b>元素则执行了字形的实际绘制。我不会说它完全无障碍，因为我认为无障碍的一部分是像页面内查找带高亮和可选文本这样的东西。但显然这是一个艺术实验，你的实现可以有多种方式。我很想看到尝试在它上面设置透明的 SVG <text>，其大小相同，以便文本是可选的。

看起来登录页面是在 CodePen 项目中构建的！

这种技术及其与无障碍性的关系非常有趣，实际上比你想象的更相关。事实上，看起来 Facebook 使用类似的 span 技术来对抗广告拦截。

Harbor Type 最近推出了 Rocher Color，一个免费的彩色字体。是的，彩色字体。那是一件事。Rocher Color 实际上是一个彩色字体，也是一个可变字体。

支持在我看来似乎相当不错，但它很复杂，因为有很多不同种类的字体，并且在不同浏览器中的支持情况也不同。

另一个情况是它们，嗯，有点庞大，体积很大。woff2 文件在这里可能最相关，因为它本身就是一个现代特性。网站上的下载文件 (RocherColorGX.woff2) 大小为 178KB。你可能不会仅仅为了一个标题就将其添加到页面上，考虑到它不仅仅是字体的粗细——而且你也在不断对抗 FOUT/FOIT 问题。

我认为要证明使用如此庞大的彩色字体是合理的，你需要…

在整个网站中大量使用它来创建动态标题
自定义颜色以使其完美匹配您的需求（提前）
利用诸如斜面和阴影调整等花哨的可变字体功能（动态）

如果您发现自己没有做这些事情，那么您可能最好使用<svg>，并将所有这些形状扩展为路径。您仍然可以使用此字体来制作 SVG，假设您的设计工具支持此类字体。您将无法获得文本换行或任何其他功能，但文件大小和加载速度会快得多。或者，您甚至可以使用 PNG/WebP 等图形格式，如果您仍然使用语义元素来表示标题（当然，视觉上隐藏），那么这样做也没有什么坏处。您将无法获得页面内查找高亮或可选择性，但这对于一次性使用来说可能是一个可以接受的折衷方案。

Kenneth Ormandy 收集了一些更有趣的 CSS 排版实验。在他的文章中，他提到了 Diana Smith 的 Pure CSS Font，它使用空元素和各种花哨的 CSS 技巧来绘制形状。

这个项目的重点就在标题中

用于私有、SEO 隐藏、CAPTCHA 友好且不可选择的文本。阻止剽窃和垃圾邮件机器人！

也对辅助技术隐藏，所以要小心，但在我看来，这个项目更多的是关于探索可能性。毕竟，正是这些字母推动了 Diana 的非凡 CSS 绘画，例如 Zigaro。

不要错过 Kenneth 的文章，因为他链接了许多更有趣的示例，这些示例展示了人们如何使用非常规工具进行排版。Kenneth 自己也尝试了一个引人入胜的小实验，使用按钮来揭示其中的技巧

查看 Pen
开始纯 CSS 排版测试 1，由 Kenneth Ormandy (@kennethormandy)创作
在 CodePen上。

评论