使用 Unicode 补充多语言平面符号创建网络字体

Question

我对传统纸牌游戏进行了在线概念验证。为了避免实际绘制卡片图片，我使用了相应的 Unicode 字符（例如 U+1F0A1 ）。虽然这在现代 Linux 桌面上效果很好（DejaVu Sans 用于显示这些字符），但其他操作系统（例如 Windows 或 Android）似乎缺乏可以显示这些字符的字体。

一个简单的解决方案是通过 加载 DejaVu Sans @font-face。为了避免下载所有 DejaVu Sans，我想创建一种仅包含相关代码点的字体。原则上，Font Squirrel 的 Webfont Generator允许这样做，但我无法让它与 Unicode Plane 1（扑克牌符号所在的位置）中的字符一起使用。

是否有一些简单的方法来创建@font-face包含 U+1F0A0 到 U+1F0DF 的兼容字体？

Answer 1

就在这里。这就是它的工作原理。

\n

创建字体

\n

为了避免仅仅为了支持一些特殊字符而使用巨大的字体，您可以使用Icomoon 应用程序等工具创建自己的字体等工具创建自己的字体。

\n

Icomoon 应用程序允许您执行以下操作：

\n

\n
• 从几种流行的图标字体中获取一个或多个图标
\n
• 上传其他字体，可能是图标字体，也可能是常规字体
\n
• 上传 SVG 文件以用作图标
\n
• 组合任意数量的可用字体中的任意数量的图标
\n
• 为您需要的字符设置 UNICODE 十六进制值
\n
• 导出和/或保存您创建的字体集
\n

\n

我使用 Icomoon 应用程序创建Emoji 表情符号字体，并根据每个项目创建自定义图标字体。

\n

\n\n

使用字体

\n

要在 CSS 中包含图标字体，您可以包含以下代码：

\n

@font-face {\n    font-family: \'myfont\';\n    src:url(\'fonts/myfont.eot?-td2xif\');\n    src:url(\'fonts/myfont.eot?#iefix-td2xif\') format(\'embedded-opentype\'),\n        url(\'fonts/myfont.woff?-td2xif\') format(\'woff\'),\n        url(\'fonts/myfont.ttf?-td2xif\') format(\'truetype\'),\n        url(\'fonts/myfont.svg?-td2xif#myfont\') format(\'svg\');\n    // Different URLs are required for optimal browser support\n    // Make sure to :\n    // 1) replace the URLs with your font\'s URLs\n    // 2) replace `#myfont` with the name of your font\n    font-weight: normal; // To avoid the font inherits boldness\n    font-style: normal; // To avoid font inherits obliqueness or italic\n}\n\n.icon {\n    font-family: \'myfont\', Verdana, Arial, sans-serif; // Use regular fonts as fallback\n    speak: none; // To avoid screen readers trying to read the content\n    font-style: normal; // To avoid font inherits obliqueness or italic\n    font-weight: normal; // To avoid the font inherits boldness\n    font-variant: normal; // To avoid the font inherits small-caps\n    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase\n    line-height: 1; // To avoid the font inherits an undesired line-height\n    -webkit-font-smoothing: antialiased; // For improved readability on Webkit\n    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla\n}\n

\n

要在 HTML 中使用图标，您可以执行以下任一操作：

\n

<!-- Method 1 -->\n<!--- * * * * * * * * * * * * -->\n<!-- Set a font-family for an entire HTML element -->\n<!-- Define your icon fonts in your CSS font-family after your regular fonts  -->\n<!-- This means that regular characters are default. Icons are a fallback  -->\n<!-- Use UTF-8 characters directly in your HTML for improved human readability -->\n<div class="rate"><p>I rate this movie \xe2\x98\x85\xe2\x98\x85\xe2\x98\x85\xe2\x98\x85\xe2\x98\x86!!</p></div>\n\n<!-- Method 2 -->\n<!--- * * * * * * * * * * * * -->\n<!-- Set a font-family for an entire HTML element -->\n<!-- Define your icon fonts in your CSS font-family after your regular fonts  -->\n<!-- This means that regular characters are default. Icons are a fallback  -->\n<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->\n<div class="rate"><p>I rate this movie &#9733;&#9733;&#9733;&#9733;&#9734;!!</p></div>\n\n<!-- Method 3 -->\n<!--- * * * * * * * * * * * * -->\n<!-- Set a font-family only for the icons but not the HTML elements that include them -->\n<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->\n<!-- This means that icons are default. Regular characters are a fallback  -->\n<!-- Use UTF-8 characters directly in your HTML for improved human readability -->\n<p>I rate this movie <span class="icon">\xe2\x98\x85\xe2\x98\x85\xe2\x98\x85\xe2\x98\x85\xe2\x98\x86</span>!!</p>\n\n<!-- Method 4 -->\n<!--- * * * * * * * * * * * * -->\n<!-- Set a font-family only for the icons but not the HTML elements that include them -->\n<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->\n<!-- This means that icons are default. Regular characters are a fallback  -->\n<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->\n<p>I rate this movie <span class="icon">&#9733;&#9733;&#9733;&#9733;&#9734;</span>!!</p>\n\n<!-- Method 5 -->\n<!--- * * * * * * * * * * * * -->\n<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->\n<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->\n<!-- This means that icons are default. Regular characters are a fallback  -->\n<!-- Use UTF-8 characters directly in your HTML for improved human readability -->\n<p>I rate this movie\n    <span class="icon">\xe2\x98\x85</span>\n    <span class="icon">\xe2\x98\x85</span>\n    <span class="icon">\xe2\x98\x85</span>\n    <span class="icon">\xe2\x98\x85</span>\n    <span class="icon">\xe2\x98\x86</span>\n    !!\n</p>\n\n<!-- Method 6 -->\n<!--- * * * * * * * * * * * * -->\n<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->\n<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->\n<!-- This means that icons are default. Regular characters are a fallback  -->\n<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->\n<p>I rate this movie\n    <span class="icon">&#9733;</span>\n    <span class="icon">&#9733;</span>\n    <span class="icon">&#9733;</span>\n    <span class="icon">&#9733;</span>\n    <span class="icon">&#9734;</span>\n    !!\n</p>\n\n<!-- Method 7-->\n<!--- * * * * * * * * * * * * -->\n<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->\n<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->\n<!-- This means that icons are default. Regular characters are a fallback  -->\n<!-- Use the \'content\' style rule with a \':before selector\' in your CSS -->\n<p>I rate this movie\n    <span class="icon icon-star"></span>\n    <span class="icon icon-star"></span>\n    <span class="icon icon-star"></span>\n    <span class="icon icon-star"></span>\n    <span class="icon icon-star-unfilled"></span>\n    !!\n</p>\n

\n

如果您想选择方法 7，则需要一些额外的 CSS 代码。这个 CSS 代码看起来像这样：

\n

.icon-star:before {\n    content: "\\2605";\n}\n\n.icon-star-unfilled:before {\n    content: "\\2606";\n}\n

\n

像Iconic、Font Awesome或Glyphicons这样的图标字体通常都使用方法 7。这是为了避免您必须从备忘单中复制粘贴特殊字符或被迫使用 HTML 实体。

\n

然而，这种方法有几个缺点。首先，它需要支持:beforeCSS 选择器并使用 UNICODE 字符的转义序列。IE6-7 和某些版本的 Webkit都不提供此支持。

\n

另一个缺点是您必须为每个图标使用单独的 HTML 标签，每个标签对应于图标字体中的一个字符。与其他方法不同，方法 7 无法在 HTML 标记内显示多个图标。

\n

不过，其他方法也有其自身的缺点。方法 1、3 和 5 要求您从备忘单中复制粘贴字符，或者使用其他方法将字符本身放入代码中。您的代码编辑器可能无法显示该字符，或者如果图标字体使用该字符的非标准映射，则它可能会显示与图标字体中的字符不同的字符。

\n

方法 1、3 和 5 还要求您的浏览器使用正确的编码来显示正确的字符。对于 UNICODE 字符，这不像 ASCII 字符那么明显。<meta charset="utf-8" />但是，应该通过在文件中的某处添加元标记来确保这一点headHTML 文档的某处添加元标记来确保这一点。

\n

方法 2、4 和 6 不需要您复制粘贴字符，但它会降低代码的可读性，并使代码的任何更改更容易出现人为错误。另外，因为您需要查找要使用的每个图标的 HTML 实体代码，否则您需要记住它们。虽然这显然也适用于方法 7 中使用的类，但这些类比 HTML 实体代码更容易记住。

\n

Answer 2

您可以尝试调整用于创建 dejavu-lgc 的 dejavu 构建脚本。那，或者直接在fontforge中编辑它。