使用Unicode Supplementary Multilingual Plane符号创建webfont

时间：2013-11-06 22:58:49

标签： unicode fonts webfonts icon-fonts

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

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

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

2 个答案:

答案 0 :(得分：4)

是的，有。这是它的工作原理。

创建字体

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

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

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

我使用Icomoon应用程序创建 Emoji emoticon font 以及基于每个项目创建自定义图标字体。

Icomoon

使用字体

要在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>

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

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

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

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

然而，这是一种有几个缺点的方法。首先，它需要支持:before CSS选择器以及对UNICODE字符使用转义序列。 IE6-7和certain versions of Webkit都没有提供这种支持。

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

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

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

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

答案 1 :(得分：1)

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

相关问题
最新问题