CSS字体的（和潜在利益）

至少不是典型的。每个字符都是使用CSS构建的HTML元素。真正的网络字体！

让我详细说明。这是一种呈现文本而无需使用任何字体的方法。随机文本用PHP分为单词和字母，然后呈现为HTML元素，带有类。每个元素都使用CSS来创建角色。这是由CSS控制的“ Just” HTML，但它仍然是软件，并且可以通过消息传递。它具有常规字体所具有的所有属性，因此我们将其称为字体。没有格式的字体。

免责声明：我不是HTML，CSS或PHP的专家。我愿意打赌有一个快捷方式或更简单的解决方案来实现我在这里所做的工作，但是由于我对结果感到满意，因此我会呈现过程和经验。演讲不是教程；这是一个基于我有限的技能的实验，应该得到这样的对待。

这个想法

该项目从来没有打算持续五个月，但这就是所需要的！这一切始于使用CSS图标玩游戏，并使用伪元素制作形状。一旦第一个字母完成，其余的就相对容易了。我检查了是否还有其他类似的项目，但没有发现太多项目，所以我有动力看看我能走多远。

最初，由CSS控制的SVG字体似乎是一个好主意。这将使此任务变得更加容易（SVG用于绘图），并且可以专注于特定于设计的效果，但是它没有原始HTML元素的灵活性。 SVG不能根据上下文进行修改，并且该过程落后于常规字体设计，每个字符都具有固定的形状和代码。

它如何工作

这是网络和字体设计的混合体。每个字符都像任何网络元素一样构建，并用内联行为像字体一样行为。指标，权重，Opentype功能和所有其他字体属性仅使用CSS文件控制。

字体设计基于元素的边界宽度，这使其非常通用。通过豁免脚本字体，使用相同的形状可以由边界变化产生几种样式和权重。在更复杂的字符上，剪辑路径和背景用于创建切口效果。

当pseudo元素之前的:: :: ::不足以形成角色时，就会生成嵌套的元素。使用宽度，高度和边框宽度的EM值将有助于以后控制字体大小。这是黄金规则之一。

字符（左）的构建就像任何CSS图标（右）一样。没有重大差异。有时，基于圆形和线条，就像贴纸一样，字母更容易构建。但是，这是您真正能够真正欣赏Border-Radius财产的角色的时候。就我个人而言，我从来都不是圆形边界的粉丝，但是这种经历改变了我的想法。基本上，半径可以做什么没有限制。

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

Serif预览的情况更为复杂，但是与往常一样，SANS字体将具有更少的元素可处理，使文件更小且负载更快。这并不是真正的问题，它只是合乎逻辑的 - 在包含 @font-face规则的字体之前，请阅读CSS。

挑战

最困难的部分是击败像素比，或将伪元素与基本形状对齐。调整了特征时，精心设计的数学公式失败了。浏览器将分别处理每个元素，并将其转移到最接近整数值。

一种解决方案是创建尽可能多的伪元素（甚至包括额外的元素），并使用单个参考来对一对:: forefer和::之后，与主形状无关。在这种情况下，浏览器将使元素或多或少地渲染到同一位置。

下面的s字母说明了没有参考点的字符。字母的顶部和底部是两个伪元素，没有依赖的基本形状（例如，衬线中的灰色区域或数字两个中的灰色区域）。

创建了几百个字符后，您会意识到字符无法支持内联转换（即Skew（），rotate（）等），因为它不会与兄弟姐妹保持一致。在文本选择上，这在视觉上变得更加明显。因此，伪元素很有意义。我要说的是必不可少的：第二个黄金法则。

CSS自定义属性

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

在这种情况下，CSS自定义属性非常方便，尤其是用于控制边界，宽度和位置。不同权重是变量变化的结果，此后调整。微调是不可避免的，因为字符形状和尺寸将边界宽度考虑到了，并且可能不会与不同边界相称地显示，尤其是在不对称形状上。

切割效果是通过在覆盖元素中添加相同的背景颜色，然后使用Mix-Blend模式的颜色和效果组合而创建的。

CSS中需要一个全局颜色变量为嵌套元素创建切口效果，否则将遵循父颜色（叠加元素与背景匹配）。

背景图像属性无法适用于专门用边界构建的字符，如果元素具有大小或位置变换（刻度，旋转或其他），则背景会更改。

如果无法使用背景，则解决方案是混合混合模式：亮光；在黑暗背景和混合模式上：深色；在光背景上。

副作用

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

文本字体

字体不会发表文字。首先，这个想法是创建一个将与CSS一起加载的文本，而无需任何依赖。为此，最好的选择是PHP（我的新秀意见）。除了使用内联函数渲染HTML外，几乎可以想象到的任何任务。没有PHP，这个项目将是不可能的。

自然，PHP的第一个任务是将随机文本分开，删除额外的空格并为每个单词和字母创建匹配组，每个单词都有自己的类。到目前为止，一切都很好。我不会坚持顺利进行的部分，这是一个基本功能，使用拆分，爆炸以及从视频游戏中借来的所有其他单词。

尽管如此，由于我以前从未从事过这个问题，因此我必须学习艰难的方法。没有人告诉我，PHP将“ 0”（零）视为无效，所以有一天消失了。我不知道为什么不显示我的零。

对于这个问题的人来说，这可能会有所帮助。我不使用empty（）函数，而是使用以下一个：

函数is_blank（$ value）{  
  返回空（$ value）&&！is_numeric（$ value）;
}

另一个主要问题是角色范围。 HTML，.HTACCESS文件以及服务器本身中的设置似乎太多，只是为了识别特殊字符。该解决方案是在PHP文档的几天后发现的，这是Qeremy [atta] gmail [dotta] com的发布，显然有人居住在变节型地区。

功能str_split_unicode（$ str，$ length = 1）{
  $ tmp = preg_split（'~~ u'，$ str，-1，preg_split_no_empty）;
  如果（$ length> 1）{
    $ chunks = array_chunk（$ tmp，$ length）;
    foreach（$块作为$ i => $块）{
        $块[$ i] = join（''，（array）$块）;
    }
    $ tmp = $块;
  }
  返回$ tmp;
}

如果您问我，很多部分，但它的工作就像魅力并解决了每个问题。该函数基本上忽略了语言设置，并且将读取任何字符，甚至是非标准的字符。如果PHP功能包含该字符，则将掩埋在Unicode表中的字符将被识别。

此函数只会创建可能生成每个字符作为键入的可能性，而无需HTML实体。此选项不会限制以HTML格式使用文本，但是必须避免或替换为替代方案。例如，可以将元素包裹在标签中，而不是使用非破坏空间（＆nbsp;）。

结构

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

基本结构看起来像这样，只是为了理解这个想法…

 ''=>'cacute c急性'

…这将呈现三个要素：父片，c字母和急性口音。结果为下方，红色正方形代表父元素，其中包含其他两个预设元素。

该技术与基于配对的字体软件中的变量（有时是连接）非常相似。当更改组件元素时，其他所有内容都会调整。

由于任何元素都可以具有多个应用程序，因此可以避免ID，并且仅使用类。

Opentype功能

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

CSS文本中的上下文连接不是独立的字符，也没有特定的类。与常规的Opentype功能不同，字符已重新设计，未更换。通过对第二个元素进行样式，合并或形成新字符，可以在CSS中控制交互。

用添加到父容器中的特定类激活这些功能。在任何情况下，无论是否在每个浏览器中注册字符，都有或没有字体功能支持。

HTML语法

任何HTML元素都可以包含CSS字体，只要它在字体的重量旁边都具有.CSS类。要选择一个重量，使用.-示例，.light，.gular或.bold类，例如

（<pre class="brush:php;toolbar:false">标签只是避免任何样式干扰的安全措施）。<p>文本可以具有HTML格式。纯文本不是强制性的。</p><p> PHP将忽略一个括号（</p><p>同样，根据布局偏好，可以将特定标签（例如<a>，<u>，<inin>和<del>）视为模拟和自定义其本地外观和行为的对象。</del></inin></u></a></p><h3 id="设置">设置</h3><p>CSS文本是一组具有边界的对象，开放尺寸和颜色处理。将颜色视为边界色，反之亦然。 ：第一个孩子而不是：第一字母。</p><p>字体大小是在CSS文件中设置的，与任何其他字体相同，使用视口，百分比，像素，EM或REM单元。设置的像素中设置的值可与十进制值一起使用。</p><p>默认情况下，文本 - 单位和文本性属性属性可以工作。即使没有文本内容，文本也将与任何设置保持一致。</p><p>块级元素（例如</p><div>，<p>，</p>
<ol>）放置在文本内部，将导致换行符，因为它通常会导致。 <br>标签按预期工作。<p>除文本格式化元素（例如</p>
<h1>  -  <h6>，<strong>，<em>，<em>，<small>，<sup>，<sub>等），这些元素需要新规则才能对文本产生正确的效果，大多数语义元素（例如，大多数语义元素（例如，<form>，<ol>，<ol>，<li>）可用于其自定义设置。<h3 id="字体">字体</h3>
<p>为了在动态内容中测试字体，在JavaScript中复制了PHP功能的一部分，粘贴，鼠标事件，插入位置和文本选择。现在，一个击键使一切都值得。</p>
<p> CSS字体和互补图标。这是实际开始的事情！</p>
<h3 id="审查-柱子-与份额">审查！柱子（）与份额（ - ）</h3>
<h4 id="即时负载">即时负载</h4>
<p>在没有实际文本的情况下，浏览器不会等待字体和脚本渲染页面。 CSS文件以及HTML元素被缓存，这意味着更快的负载。</p>
<h4 id="普遍的">普遍的</h4>
<p>每个浏览器和服务器都识别CSS。在每个浏览器中找到合适的格式的烦恼更少。服务器将不会检查特定格式以允许访问。</p>
<h4 id="没有依赖性">没有依赖性</h4>
<p>CSS字体不需要备用或系统字体即可显示文本。页面样式的同一CS可以包含字体。浏览器不会在页面加载之前和之后显示默认字体。该字体不依赖于第三方和脚本，并且在具有禁用脚本的浏览器上设计并不差异。</p>
<h4 id="没有嵌入">没有嵌入</h4>
<p>CSS字体已完全集成到一个网页中，并适应布局而无需更换负载上的其他元素。每个页面属性都对文本有效，这将显示其预期的方式，而无需效果或功能问题。</p>
<h4 id="选择性使用">选择性使用</h4>
<p>字体可以简化为有限数量的字符。例如，如果布局具有单个单词或符号，则不需要完整版。</p>
<h4 id="完全安全">完全安全</h4>
<p>页面上不存在实际文本，这意味着可以轻松地显示敏感信息，而不必担心垃圾邮件或网络钓鱼。</p>
<h4 id="SEO友好"> SEO友好</h4>
<p>可以使用TAG属性包括重要信息，就像Alt属性适用于图像一样。</p>
<h4 id="可自定义">可自定义</h4>
<p>为了构建复杂的字符或功能，该字体均可为任何HTML元素打开。无需脚本即可获取特定的细节，因为每个单词和字母都有自己的实体，并且可以单独进行样式。</p>
<h4 id="上下文">上下文</h4>
<p>字体设计不仅限于预定义的字符，因此该样式可以根据上下文改变而不创建新字符。</p>
<h4 id="持续的">持续的</h4>
<p>为了弥补字体软件中缺乏自动化，在CSS中，设计可以一次控制几个元素。该参数是有效的，因为字体软件可与现有内容一起使用，而CSS可以使用属性，为每个现有或将来的元素创建模板。</p>
<h4 id="民众">民众</h4>
<p>任何人都可以创建自己的字体。短文可以手动渲染，并且PHP功能不是必需的。</p>
<h4 id="基本的">基本的</h4>
<p>任何文本编辑器或开发人员工具都可以访问该设计。使用边界宽度，边界半径，形状和大小的基本技能足以重新设计任何角色。</p>
<h4 id="居住">居住</h4>
<p>每个调整结果都是即时的。从过程中消除了转换，导出，上传或其他激活字体的步骤。</p>
<h4 id="中等用途">中等用途</h4>
<p>如果为扩展文本生成CSS字体，则页面的速度可能会受到影响。因此，仅建议使用此技术来进行头条，标题，摘录和简短的段落。</p>
<h4 id="常见的">常见的</h4>
<p>CSS字体不会从特殊治疗中受益，因为对于浏览器而言，这只是另一个HTML元素。结果，没有优化或Kerning支持。像素很难共享细线，并且在小尺寸的字体上可能会显示不正确。</p>
<h4 id="硬编码">硬编码</h4>
<p>默认情况下，您通常的字体设置不可用（例如<strong>，<em>等）没有效果。该功能必须在CSS文件中设置，并且需要使用不同的方法，即使用HTML元素而不是字体。</em></strong></p>
<h4 id="独家的">独家的</h4>
<p>这是一个WebFont，因此仅限于由CSS控制的数字媒体。除了一些位图效果外，只能通过将文档打印为PDF来将字体转换为离线，该字体将CSS转换为向量格式。</p>
<h4 id="抽象的">抽象的</h4>
<p>如果没有独立文件，则很难识别，测试或传输字体。它的作用类似于HTML颜色：它是不可见的，直到生成为止。</p>
<h4 id="不可选择">不可选择</h4>
<p>如果没有额外的脚本，则无法在输入和文本列出中选择或使用文本。对于动态内容，该函数需要PHP中发现的整个字符识别。</p>
<h4 id="不互动">不互动</h4>
<p>最常见的显示功能（例如排序或过滤器）将必须与类一起工作，而不是文本内容。</p>
<h4 id="不可打印">不可打印</h4>
<p>在线打印仅支持基本的CSS规则，有时忽略图形来支持文本。印刷质量将严格依赖浏览器的功能。</p>
<h4 id="没有可访问性">没有可访问性</h4>
<p>CSS字体将调整为页面缩放，但是字体大小和语言无法通过浏览器更改。<br>自定义浏览器功能（例如查找，读取器）无法访问文本内容，因为没有。</p>
<h4 id="有限的设计">有限的设计</h4>
<p>没有多种样式可供选择，设计仅限于CSS的功能。 CSS规则可能对不同的浏览器具有不同的含义，从而导致不一致。 CSS字体是编写的，而不是绘制的，因此完全消除了“手工制作”概念。</p>
<h4 id="多任务">多任务</h4>
<p>您需要知道您的CSS以在字体上进行调整，反之亦然。设计过程不是自动化的，必须手动设置机器产生的某些属性。</p>
<h4 id="没有保护">没有保护</h4>
<p>任何人都可以访问设计代码，与任何在线元素相同。该设计不能真正保护未经授权的复制和使用。</p>
<p>感谢您的阅读！这是字体主页。</p>
</li>
</ol>
</ol>
</form></sub></sup></small></em></em></strong>
</h6>
</h1>
</ol>
</div>

以上是CSS字体的（和潜在利益）的详细内容。更多信息请关注PHP中文网其他相关文章！