logo标签列表

Unicode和字体

unicodefonts
3

我很少看到有人讨论这个问题。我正在开发一款支持多语言的软件，因此我需要使用兼容Unicode的字体，对吗？我可能在哪里找到这样的字体，并且如何确定它们确实支持中文、韩文、日文或其他存在的语言呢？

很遗憾，您不能使用在互联网上找到的漂亮字体，因为它们大多只支持ASCII。

1
那么您不能使用任何在互联网上找到的字体，因为客户很可能没有安装它们。 - Quentin
1
支持多语言，因此，我需要使用Unicode兼容字体，对吗？简短的回答是否定的，特别是在浏览器应用程序中。你唯一需要做的是符合标准，使用支持你所需的所有语言的文本编码，并在你的应用程序中要求使用现代浏览器/操作系统组合。字体本身在这里根本不相关。例如，Windows几乎已经有了一种技术，可以根据语言自动呈现不同字体（包括带有中文字形的内置字体）。 - bzlm
4个回答
3

请注意：不要期望找到一种支持繁体中文、简体中文和日语的字体。

由于相同的Unicode代码点存在字形差异，因此本地用户会立即发现您未使用适合他们语言的正确字体。

对于Web应用程序，最好提供字体列表，并在列表中包括典型的Windows字体、典型的Mac字体和通用字体（如“衬线”）。

使用适当的lang标签标记html页面（或段落）将有助于一些（更智能的）浏览器在未安装特定字体时选择正确的字体。

2

http://www.alanwood.net/unicode/fonts.html

艾伦·伍德的网站有许多Unicode字体。每个字体旁边都有一份列表，解释了它支持哪些语言。

另一个很棒的网站是Unifont的字体指南。只需在谷歌上搜索即可找到，我还没有链接它的声誉。在那里，只需点击站点顶部的大陆选项卡，即可查看包括来自这些国家的语言的字体。

1
您可以使用像Icomoon App这样的工具创建自己的定制web字体。
Icomoon App允许您执行以下操作：
  • 从多个流行的图标字体中获取一个或多个图标
  • 上传其他字体，可以是图标字体，也可以是常规字体
  • 上传SVG文件以用作字形
  • 从任意数量的可用字体中组合任意数量的字形
  • 为所需的任何字符设置UNICODE十六进制值
  • 导出和/或保存您创建的字体集
我使用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和某些版本的Webkit都不提供此支持。

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

其他方法也有它们自己的缺点。方法1、3和5需要你从作弊表中复制粘贴字符或使用手段将字符本身放在你的代码中。你的代码编辑器可能无法显示该字符，或者如果图标字体使用非标准映射该字体，则可能显示与图标字体中不同的字符。
方法1、3和5还要求你的浏览器使用正确的编码来显示正确的字符。对于UNICODE字符，这并不像ASCII字符那样明显。然而，通过在HTML文档的head中添加 meta标签可以确保这一点。
方法2、4和6不需要你复制粘贴字符，但它会使你的代码对人类更难读懂，并且任何对代码的更改更容易出现人为错误。此外，你需要查找每个想要使用的图标的HTML实体代码或者需要记住它们。虽然同样适用于方法7中使用的类，但是相比于HTML实体代码，这些类更容易记忆。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接