我做了一个传统纸牌游戏的概念验证在线实现。为了避免实际绘制卡片的图片，我使用了相应的 Unicode 字符（例如 U+1F0A1 ）。虽然这在现代 Linux 桌面（使用DejaVu Sans 来显示这些字符）上效果很好，但其他操作系统（例如 Windows 或 Android）似乎缺少可以显示这些字符的字体。
一个简单的解决方案是通过@font-face. 为了避免下载所有 DejaVu Sans，我想创建一个仅包含相关代码点的字体。原则上， Font Squirrel 的 Webfont Generator允许这样做，但我无法让它与来自 Unicode 平面 1（扑克牌符号所在的位置）的字符一起使用。
是否有一些简单的方法来创建@font-face包含 U+1F0A0 到 U+1F0DF 的兼容字体？
就在这里。这就是它的工作原理。
为了避免使用大字体来支持一些特殊字符，您可以使用Icomoon App等工具创建自己的字体。
Icomoon 应用程序允许您执行以下各项操作：
我使用 Icomoon 应用程序来创建Emoji 表情字体以及在每个项目的基础上创建自定义图标字体。
要在 CSS 中包含图标字体，您可以包含以下代码：
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
要在 HTML 中使用图标，您可以执行以下操作：
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
如果您想选择方法 7，则需要一些额外的 CSS 代码。这个 CSS 代码看起来像这样：
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Iconic、Font Awesome或Glyphicons等图标字体通常都使用方法 7。这是为了避免您必须从备忘单中复制粘贴特殊字符或被迫使用 HTML 实体。
然而，这种方法有几个缺点。首先，它需要支持:beforeCSS 选择器并为 UNICODE 字符使用转义序列。IE6-7 和某些版本的 Webkit都不提供这种支持。
另一个缺点是您必须为每个图标使用单独的 HTML 标记，每个标记对应于图标字体中的一个字符。与其他方法不同，方法 7 无法在 HTML 标记中显示多个图标。
不过，其他方法也有其自身的缺点。方法 1、3 和 5 要求您从备忘单中复制粘贴字符或使用方法将字符本身放入您的代码中。您的代码编辑器可能无法显示该字符，或者如果图标字体使用该字符的非标准映射，它可能会显示与图标字体中的字符不同的字符。
方法 1、3 和 5 还要求您的浏览器使用正确的编码来显示正确的字符。对于 UNICODE 字符，这不像 ASCII 字符那样明显。但是，这应该通过在HTML 文档的<meta charset="utf-8" />某处添加元标记来确保。head
方法 2、4 和 6 不需要您复制粘贴字符，但是它会降低您的代码对人类的可读性，并使对代码的任何更改更容易出现人为错误。此外，您需要查找要使用的每个图标的 HTML 实体代码，或者您需要记住它们。虽然这显然也适用于方法 7 中使用的类，但这些类比 HTML 实体代码更容易记住。
您可以尝试调整用于创建 dejavu-lgc 的 dejavu 构建脚本。那，或者直接在fontforge中编辑它。