用Unicode补充多语言平面符号创buildwebfont

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

一个简单的解决scheme是通过@font-face加载DejaVu Sans。 为了避免必须下载所有的DejaVu Sans，我想创build一个只包含相关代码点的字体。 原则上字体松鼠的Webfont发生器允许，但我不能得到它与Unicode平面1（纸牌符号）的字符。

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

Answer 1

你可以尝试去调整用来创builddejavu-lgc的dejavu构build脚本。 那，或者直接在fontforge中编辑它。

Answer 2

就在这里。 这是如何工作的。

创build字体

为了避免使用巨型字体来支持一些特殊字符，可以使用Icomoon App等工具创build自己的字体。

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

• 从几种stream行的图标字体中获取一个或多个图标
• 上传其他字体，可能是图标字体，也可能是常规字体
• 上传SVG文件以用作图标
• 结合任意数量的可用字体中的任意数量的图标
• 为您需要的字符设置UNICODEhex值
• 导出和/或保存您创build的字体集

我使用Icomoon应用程序来创buildEmoji表情符号字体以及在每个项目的基础上创build自定义图标字体。

---

使用字体

要在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 &#9733;&#9733;&#9733;&#9733;&#9734;!!</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">&#9733;&#9733;&#9733;&#9733;&#9734;</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">&#9733;</span> <span class="icon">&#9733;</span> <span class="icon">&#9733;</span> <span class="icon">&#9733;</span> <span class="icon">&#9734;</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> 

如果你想select方法7，你需要一些额外的CSS代码。 这个CSS代码如下所示：

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

Iconic ， Font Awesome或Glyphicons等图标字体通常都使用方法7.这样可以避免从备忘单中复制粘贴特殊字符或被迫使用HTML实体。

然而，这是一个有几个缺点的方法。 首先，它需要支持:before CSSselect器:before以及对UNICODE字符使用转义序列。 IE6-7和某些版本的Webkit都不提供这种支持。

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

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

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

方法2，方法4和方法6不要求复制粘贴字符，但它使得代码不易被人读取，并且对代码更改更容易出现人为错误。 而且，因为您需要查找要使用的每个图标的HTML实体代码，所以您需要记住它们。 虽然方法7中使用的类同样也适用，但这些类比HTML实体代码更容易记忆。