用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字体?

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

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

    创build字体

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

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

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

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

    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> 

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

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

    IconicFont AwesomeGlyphicons等图标字体通常都使用方法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实体代码更容易记忆。