Question

我目前正试图弄清楚this site上404图标的工作原理。它似乎是没有图像的纯css，但它完全由一个元素完成。

在Chrome开发者控制台中使用页面后，我发现该设计似乎与主div中content上的css ::before属性相关，后者具有以下css属性：

color: #e8e5ce;
content: "\f423";
font-size: 964px;
line-height: 0.6;
overflow: hidden;
position: absolute;
left: 7px;
top: 28px;

更改所有这些内容但内容并没有令人兴奋，但以任何方式更改内容都会删除404模式。

搜索＆＃34; \ f423＆＃34;和＆＃34; \ f423 404＆＃34;并没有多少。但是，我找到了this page on "css escape sequences"。但是，我无法使用相同的html和css自行复制此效果。这是wordpress功能吗？他们以某种方式导入css图像？如果是这样，为什么他们会这样做呢？

谢谢！

Answer 1

根据CSS中backslash escapes的规则，"\f423"表示由U + F423 PRIVATE USE CHARACTER-F423组成的字符串。在Unicode中，private use characters是“代码点，其解释不是由字符编码标准指定的，其使用和解释可以由合作用户之间的私人协议来确定”。这意味着它们根本不是真正的字符，而是通过私有协议将可能分配给字符（通常是尚未以Unicode编码的字符）的代码点。出于显而易见的原因，不应在开放信息交换中使用私人使用字符，例如网页。

然而，图标字体欺骗通常使用私人使用字符，以及私人使用代码点中具有合适字形的字体。这意味着当不使用特定的“私人字体”时，由于某种原因，浏览器（或搜索引擎或其他软件）将以某种未指定的方式处理私人使用代码点。它可以被忽略，或使用一些通用符号显示。

Answer 2

问了一个类似的问题here 基本上，它是如何，例如，字体真棒的工作：

实际字体图标（例如FontAwesome）确实涉及下载特定字体并使用内容属性。这是一个完全原始的FontAwesome用作字体的示例，将（ - 您可能无法看到这个！）变成救护车：http://jsfiddle.net/GWqcF/2

您还可以查看how font awesome is implemented

Answer 3

这显示支持角色的字体...... f423/fontsupport.htm

在css中转义序列？做什么：内容：“\ f423”;做？

3 个答案: