Unicode and fonts

This is something that I don't see much discussed. I'm developing a software tha开发者_C百科t will support multilingualism, thus, I would need to use Unicode compatible fonts, right? Where could I possibly find such fonts and how would I know for sure they support Chinese, Korean, Japanese, whatever there exist?

It's a shame you can't use beautiful fonts found in the Internet, because most of them support ASCII only.

Just to make sure: do not expect to find a font that supports Chinese Traditional, Chinese Simplified, and Japanese.

There are glyph differences for the same Unicode code points, so a native user will immediately spot that you are not using the proper font for their language.

For a web application it is probably best to give a list of fonts, and in the list you need a typical Windows font, a typical Mac font, and a generic one (like "serif").

Tagging the html page (or the paragraph) with the proper lang tag will help some (smarter) browsers to select the right font if the specific ones are not installed.

From my unicode/font bookmark collection

http://en.wikipedia.org/wiki/Category:Free_software_Unicode_typefaces

http://en.wikipedia.org/wiki/Unicode_typefaces

http://unifoundry.com/unifont.html

http://www.fileformat.info/info/unicode/font/index.htm

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

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

http://www.unifont.org/fontguide/

http://www.wazu.jp/index.html

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

Alan Wood's site has alot of Unicode fonts. By each font there is a list explaining which languages is supported by it.

Another great site is the fontguide at Unifont. To find it just google for it, don't have the reputation to link it yet. When there, just click the continent-tabs at top of the site to view fonts including languages from those countries.

You can create your own custom webfonts with tools like the Icomoon App.

The Icomoon App allows you to do each of the following :

• Get one or more icons from several popular icon fonts
• Upload other fonts, which may be icon fonts but also regular fonts
• Upload SVG files to use as glyphs
• Combine any number of glyphs from any number of available fonts
• Set the UNICODE hex value for whichever characters you need
• Export and/or save the font set you create

I used the Icomoon App to create the Emoji emoticon font as well as for creating custom icon fonts on a per project basis.

To include an icon font in your CSS, you can include the following code :

@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
}

To use an icon in your HTML, you can do each of the following :

<!-- 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>

If you want to opt for method 7, you'll need some additional CSS code. This CSS code would look like this :

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

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

Icon fonts like Iconic, Font Awesome or Glyphicons typically all use method 7. This, to avoid you having to copy-paste special characters from a cheat sheet or being forced to use HTML entities.

It is, however, a method that has several downsides. First of all, it requires support for the :before CSS selector and the use of an escape sequence for UNICODE characters. Neither IE6-7 nor certain versions of Webkit provide this support.

Another downside is that you have to use a seperate HTML tag for each icon, with each tag corresponding to one character from the icon font. Displaying several icons within HTML tag is not possible with method 7, unlike with other methods.

Other methods have their own downsides, though. Methods 1, 3 and 5 require you to copy-paste the character from a cheat sheet or use means to put the character itself within your code. Your code editor may not be capable of displaying the character or it may display a different character from the one in your icon font if the icon font uses a non-standard mapping that character.

Methods 1, 3 and 5 also require that your browser uses the proper encoding to display the correct character. For UNICODE characters, this isn't as obvious as it is for ASCII characters. This should, however, be ensured by adding the meta-tag <meta charset="utf-8" /> somewhere in the head of your HTML-document.

Methods 2, 4 and 6 do not require you to copy-paste the character, however it makes your code less readable by humans and makes any changes to the code more prone to human error. Also, as you will need to look up the HTML-entity code for each of the icons you want to use or you'll need to memorize them. While the same obviously applies to the classes used in method 7 as well, those classes are much easier to memorize than an HTML entity code.