How can I create webfonts with Unicode Supplementary Multilingual Plane symbols using Icomoon App?

Creating Webfonts with Unicode Supplementary Multilingual Plane Symbols

To address the issue of displaying characters from Unicode Plane 1 (such as playing card symbols) on operating systems like Windows and Android, a simple solution involves creating webfonts containing only the relevant code points. Font Squirrel's Webfont Generator allows for this, but it cannot currently handle characters from this Unicode plane.

Solution using Icomoon App

Fortunately, there is an alternative solution using the Icomoon App, which offers the following capabilities:

• Retrieving icons from popular icon fonts or uploading custom fonts
• Uploading SVG files as icons
• Combining icons from various sources
• Setting Unicode hex values for specific characters
• Exporting and saving custom font sets

Creating the Font

To avoid including unnecessary characters in the font, use Icomoon App to create a custom font containing only the desired code points (e.g., U 1F0A0 to U 1F0DF). This allows for a more compact font size.

Using the Font

In your CSS, include the following code to incorporate the icon font:

<code class="css">@font-face {
    font-family: 'myfont';
    /* ... Font source URLs ... */
}

.icon {
    font-family: 'myfont', Verdana, Arial, sans-serif; /* Use regular fonts as fallback */
    /* ... Other styling properties ... */
}</code>

To display an icon within HTML, use one of several methods:

• Method 1: Use UTF-8 characters directly for improved readability.
• Method 2: Use entity codes for uncertain UTF-8 support.
• Method 3: Define a custom font family for icons within HTML elements.
• Method 4: Use entity codes and a custom font family for icons within HTML elements.
• Method 5: Create separate HTML tags for each icon.
• Method 6: Use separate HTML tags and entity codes for each icon.
• Method 7: Set a custom font family for icons and utilize CSS rules with a ':before selector' to display characters (e.g., .icon-star:before { content: "2605"; }).

Considerations

• Methods 1, 3, and 5 require the use of UTF-8 encoding and special characters.
• Methods 2, 4, and 6 require entity codes, which can reduce readability.
• Method 7 requires support for ':before selectors' and UNICODE character escape sequences.

By utilizing the Icomoon App to create a custom font and implementing one of these methods in your code, you can easily display Unicode Plane 1 characters in webfonts, resolving the issue you encountered with DejaVu Sans.

The above is the detailed content of How can I create webfonts with Unicode Supplementary Multilingual Plane symbols using Icomoon App?. For more information, please follow other related articles on the PHP Chinese website!