CSS 字体的制作（及其潜在优势）

至少不是普通的字体。 每个字符都是一个 HTML 元素，使用 CSS 构建而成。 真正的网络字体！

让我详细解释一下。 这是一种无需使用任何字体即可呈现文本的方法。 随机文本使用 PHP 拆分为单词和字母，然后作为带有类的 HTML 元素呈现。 每个元素都使用 CSS 进行样式设置以创建字符。 这“仅仅”是使用 CSS 控制的 HTML，但它仍然是软件，并且能够传递信息。 它具有传统字体的所有属性，因此我们将它称为字体。 一种没有格式的字体。

免责声明： 我不是 HTML、CSS 或 PHP 方面的专家。 我敢肯定，这里存在实现我所做事情的捷径或更简单的解决方案，但由于我对结果感到满意，因此我将介绍该过程和我的经验。 本介绍不是教程； 它基于我有限技能的实验，应以这种方式对待。

想法

这个项目原本不打算持续五个月，但事实证明确实花了这么久！ 一切都始于玩一个 CSS 图标，使用伪元素来制作 形状。 第一个 S 字母完成后，其余字母就相对容易了。 我查看了是否有其他类似的项目，但没有发现太多，因此我更有动力去看看我能做到什么程度。

最初，一个使用 CSS 控制的 SVG 字体似乎是一个好主意。 它会使这项任务变得容易得多（SVG 专门用于绘图），并且可以专注于特定于设计的效果，但它没有原始 HTML 元素的灵活性。 SVG 无法根据上下文进行修改，并且该过程会回退到传统的字体设计，其中每个字符都有一个固定的形状和代码。

工作原理

这是一种网络和字体设计的混合体。 每个字符都像任何网络元素一样构建，并内联使用以像字体一样工作。 度量、权重、OpenType 功能以及所有其他字体属性都是通过 CSS 文件独家控制的。

字体设计基于元素的边框宽度，这使得它非常通用。 除脚本字体外，只需使用相同的形状，通过边框的变化即可产生多种样式和权重。 在更复杂的字符上，使用裁剪路径和背景来创建剪切效果。

当 ::before 和 ::after 伪元素不足以形成字符时，会生成嵌套元素。 使用 em 值作为宽度、高度和边框宽度将有助于以后控制字体大小。 这是黄金法则之一。

字符（左侧）像任何 CSS 图标（右侧）一样构建。 它们之间没有重大差异。 有时一个字母很容易构建，就像一个简笔画人一样，基于圆形和线条。 但这就是您真正能够欣赏 border-radius 属性作用的地方。 我个人从来不喜欢圆角边框，但这段经历改变了我的想法。 基本上，半径可以做到的没有限制。

以下是本文中 CSS 字体的两个“真实”示例，其余示例图已转换为 SVG，以便在博客文章中更容易显示。

衬线预览呈现了一种更复杂的情况，但通常，无衬线字体将具有更少的元素要处理，从而使文件更小，加载速度更快。 这其实不是什么问题，而且这是合乎逻辑的——CSS 在使用 @font-face 规则嵌入字体之前读取。

挑战

在创建了几百个字符后，您会意识到一个字符不能支持内联变换（即 skew()、rotate() 等），因为它不会与兄弟元素对齐。 在文本选择中，这在视觉上更加明显。 因此，伪元素非常有意义。 我会说它至关重要：第二条黄金法则。

CSS 自定义属性

在 CSS 中创建样式似乎比在字体软件中更容易。 您可以选择同时控制多个字符的形状和大小。 在 CSS 中，更多字符在同一个规则集中分组。

CSS 自定义属性在这种情况下非常方便，尤其是在控制边框、宽度和位置方面。 不同的权重是变量更改的结果，之后进行了调整。 微调是不可避免的，因为字符形状和大小会考虑边框宽度，并且可能不会随着不同边框按比例显示，尤其是在非对称形状上。

副作用

缺点是，某些效果可能会对具有可变属性的元素产生意外甚至相反的结果。 通常，filter 会将元素读取为完整对象。 为了防止任何冲突，边框和变换效果保留用于字体设计。

字体到文本

字体不会生成文本。 最初的想法是创建一个文本，该文本将与 CSS 一起加载，没有任何依赖项。 为此，最佳选择是 PHP（我的菜鸟观点）。 除了使用内联函数呈现 HTML 外，它几乎可以完成任何可以想象的任务。 没有 PHP，这个项目就不可能实现。

当然，PHP 的第一个任务是拆分随机文本，删除多余的空格，并为每个单词和字母创建匹配组，每个组都有自己的类。 到目前为止一切顺利。 我不会强调顺利完成的部分，这是一个基本函数，使用 split、explode 以及所有其他从视频游戏中借用的词语。

尽管如此，由于我以前从未做过这个，因此我不得不从错误中学习。 没有人告诉我 PHP 将“0”（零）视为 null，因此一天就这样过去了。 我不明白为什么我的零没有显示出来。

对于遇到此问题的任何人来说，也许它会有所帮助。 我没有使用 empty() 函数，而是使用了下面的函数

function is_blank( $value ) {  
  return empty( $value ) && !is_numeric( $value );
}

另一个主要问题是字符范围。 似乎 HTML、.htaccess 文件以及服务器本身中存在太多设置，仅用于识别特殊字符。 该解决方案是在几天后从 PHP 文档 中找到的，由 qeremy [atta] gmail [dotta] com 发布，显然是住在重音符号密集区域的人。

function str_split_unicode( $str, $length = 1 ) {
  $tmp = preg_split( '~~u', $str, -1, PREG_SPLIT_NO_EMPTY );
  if ( $length > 1 ) {
    $chunks = array_chunk( $tmp, $length );
    foreach ( $chunks as $i => $chunk ) {
        $chunks[$i] = join( '', ( array ) $chunk );
    }
    $tmp = $chunks;
  }
  return $tmp;
}

恕我直言，有很多代码块，但这确实像个魔法，解决了所有问题。该函数基本上会忽略语言设置，读取任何字符，即使是非标准字符。如果 PHP 函数包含该字符，则 Unicode 表格中深层的字符也将被识别。

此函数仅提供生成每个输入字符的可能性，无需使用 HTML 实体。此选项不会限制在 HTML 格式中使用文本，但应避免使用内联代码或使用其他方法替换它们。例如，可以使用 `<nobr>` 标签将元素包装起来，而不是使用不换行空格 ( `&nbsp;` )。

结构

解决了这个问题之后，下一步是为每个字符创建特定的结构。HTML 元素的类和嵌套元素的位置取决于与一个或多个类相对应的长字符列表。一些最基本的字符也不包含在此列表中（例如，小写字母“a”需要一个收笔，这意味着需要一个额外的元素/类）。

为了便于理解，基本结构如下所示...

'Ć' => 'Cacute C acute'

...它将呈现三个元素：父级 Cacute、字母 C 和锐音符。结果如下所示，其中红色正方形代表父级元素，包含另外两个预设元素。

OpenType 特性

PHP 函数被设置为根据上下文表现出不同的行为。字符识别被设置为替换配对并在呈现 CSS 文本时创建连字。

CSS 文本中的上下文连字不是独立字符，没有特定的类。与传统的 OpenType 特性不同，字符的样式被重新设计，而不是被替换。通过对第二个元素进行样式设置来控制交互，以合并或形成一个新字符。

这些特性通过向父容器添加一个特定的类来激活。无论字符是否注册，在任何情况下都会呈现替代项，在任何浏览器中，无论是否有字体特性支持。

HTML 语法

任何 HTML 元素都可以包含 CSS 字体，只要它在字体权重旁边具有 ` .css ` 类。要选择权重，请使用 ` .thin `、` .light `、` .regular ` 或 ` .bold ` 类，例如 ` <pre class="regular css"> `（` <pre> ` 标签仅仅是一个安全措施，以避免任何样式干扰）。

文本可以具有 HTML 格式。纯文本不是必需的。

如果括号 ( ` < ` ) 具有相应的结束符号，则 PHP 会忽略它，这意味着文本中的每个 HTML 标签都将保持活动状态，只有文本内容被呈现为 CSS 字体。浏览器以相同的方式编码标签中找到的 URL、文件路径或其他附加信息。如果在 CSS 中设置了这些标签，则它们可以为字母组或整个句子设置样式。

此外，根据布局首选项，特定的标签（例如 ` <a> `、` <u> `、` <ins> ` 和 ` <del> `）可以被视为对象，以模拟和自定义其原生外观和行为。

设置

CSS 文本是一组带有边框的对象，可以进行大小和颜色处理。将颜色视为 ` border-color `，反之亦然。使用 ` :first-child ` 而不是 ` :first-letter `。

在 CSS 文件中设置 ` font-size `，与其他字体相同，使用视窗、百分比、像素、em 或 rem 单位。以像素为单位的值可以使用小数。

` text-align ` 和 ` text-indent ` 属性默认情况下可用。即使没有文本内容，文本也会对齐到任何设置。

放置在文本内的块级元素（例如 ` <div> `、` <p> `、` <ol> `）会导致换行，就像通常情况下那样。` <br> ` 标签按预期工作。

除了文本格式化元素（例如 ` <h1> `–` <h6> `、` <strong> `、` <em> `、` <small> `、` <sup> `、` <sub> ` 等），它们需要新的规则才能对文本产生正确的影响，大多数语义元素（例如 ` <form> `、` <ol> `、` <li> `）使用其自定义设置。

字体

为了在动态内容中测试字体，PHP 函数的一部分在 JavaScript 中被复制，包括粘贴、鼠标事件、光标位置和文本选择。现在，只需按一下键就可以实现所有这些功能。

CSS 字体和补充图标。这正是整个事情的开始！

评论！优点 (+) vs. 缺点 (-)

---

感谢您的阅读！这是字体的首页。