A few days ago, when I made the online dictionary service on this site, I had a problem with the English alphabet fonts. In Baidu's English dictionary, the phonetic alphabet is made into an image. When the result is output, the corresponding phonetic alphabet image is output, but I don't want to use this method. I want users to directly see the phonetic alphabet without downloading and installing fonts. I thought of the font import function in CSS.
The CSS instruction document contains the following section:
@ Font-face version: css2 compatibility: ie4 +
Syntax:
@ Font-face {font-family: Name; SRC: URL (URL); srules}
Valid value:
Name: font name. Any possible font-family attribute values
URL: Specifies the opentype font file with an absolute or relative URL.
Srules: style sheet Definition
Note:
Set the font of the embedded HTML document. This rule has no default value.
This rule allows you to use fonts that may not exist on the client's local system on the webpage. The URL address must point to the opentype font file (. EOT or. ote ). This file contains compressed font data that can be converted to a TrueType font. It can be used to provide HTML documents with this font or replace the existing fonts of the same name on the client system. This file can be created using Microsoft weft.
In this way, we need Microsoft's weft tool.
Microsoft weft tool description page (click to view details)
Microsoft weft tool (click to download)
Font Embedding demonstration
Tutorial (E)
Brief description: first create an empty HTM document, then open weft, and add the newly created HTM file according to the wizard.
Next, you will be prompted that the program will analyze the system font. Do not check skip analysis at this time to continue the next step. After the program is scanned, a dialog box is displayed. Do not worry about the next step. Click "add, select the font to be created. Only the TrueType font can be created. Next, select the storage location of the generated ETO font file. The Selection box below is important. The first time it is because it is not clear, it will be invalid. Enter the site in which the font is allowed to be used. This place is recommended to enter two domain names, one is: http: // 127.0.0.1, as the local test, the other is your site address, such as: http://www.imagecode.net, after setting, next, continue until the process is completed.
After the calculation is complete, find the generated EOT file and put it in the website directory. On the page that requires this font, follow the steps below.
<HTML>
<Head>
<Title> test page </title>
<Style type = "text/CSS">
<! --
@ Font-face {font-family: myfont; font-style: normal; SRC: URL (arial0.eot );}
-->
</Style>
</Head>
<Body>
<Font face = "myfont"> test text </font>
</Body>
</Html>
Note that when @ font-face is used, it is recommended that font-Family define a font name instead of the font name on the machine. Otherwise, if the EOT font fails to be loaded during <font face = 'myfont'>, the system font may be used to display the EOT font. In this way, you cannot determine whether the CSS font is successfully loaded. In fact, if the font is loaded successfully, a prompt will pop up automatically after weft is installed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
