Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use CSS3 to embed Web fonts", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use CSS3 to embed Web fonts.

CSS3 embedded Web fonts

Web designers have always wanted to add some elegant fonts to Web pages when designing web pages, but browsers are limited to rendering text using fonts that users install on their systems, which limits most websites to a shortage of fonts. For many years, we have been using pictures to replace text to solve the problem of using elegant fonts on pages, but this is impractical for websites that change text frequently, so we insist on using these small amounts of Web fonts. Sometimes they are difficult to implement because they require users to enable JavaScript or Flash plug-ins locally.

@ font-face module introduction:

@ font-face mainly embeds the self-defined Web fonts into the Web page. These custom fonts are placed on the server, and the browser will download the corresponding fonts to the local cache according to the specified command and use it to modify the text. This is also often referred to as Web font embedding (there are actually no fonts embedded).

@ font-face syntax:

With the @ font-face module, as long as the font is passed to the server, the designed web page can be displayed correctly regardless of whether the corresponding font is installed on the client or not. in more professional terms, @ font-face can load the font on the server side and let the client browser display fonts that are not installed on the client side.

@ font- face {font- family:

Src:

[

] [

[

]] *

[font- weight:

]

[font- style:

];}

The values are described as follows:

1. YourWebFontName: specify a custom font name, preferably the default font file name you downloaded, which will be referenced to the font-family in the Web element. Such as "font- family:' YourWebFont-Name'".

2. Soure: specify a custom font storage path, which can be relative or absolute.

3. Format: specify a custom font format, which is mainly used to help browsers identify it. The values are mainly of the following types, such as truetype, opentype, truetype- aat, embedded- opentype, avg and so on.

4. Font-weight and font-style: the former is used to specify whether the font is bold, while the latter mainly defines font styles, such as italics. In addition to these two properties, similar properties include font-variant, font- size, font-stretch, and so on.

Advantages of using font icons:

Http:/ / www.iis7.com/b/wzjk/

What are the advantages of using font icons and bitmaps?

1. Applicability: an icon font is smaller than a series of images (especially when using double-size images on Retina screens). Once the icon font is loaded, the icon will be rendered without downloading any images.

two。 Extensibility: icon fonts can be sized using the font-size property.

3. Flexibility: text effects can be easily applied to icons, including colors, shadows, and flipping effects. They can also be displayed in any background.

4. Compatibility: Web fonts support all modern browsers, including lower versions of IE.

Implement @ font-face:

The @ font-face attribute, like @ media,@import, @ keyframes, and so on in CSS3, encapsulates multiple rules with the key character "@". @ font-face 's "@" rule is mainly used to specify custom fonts, and then invoke custom fonts in @ font-face in other style blocks.

Use @ font-face custom fonts

To use @ font-face custom fonts normally, you must meet the following key points:

1. Upload various format fonts to the server to support a variety of browsers

two。 Explicitly specify the custom font name and the font source that references the custom font in @ font-face.

Both font-family and src are required to customize fonts through font-family, while src is the source for referencing custom fonts. Of course, in addition to these two properties, you can also explicitly style text through font-related properties, such as font- weight, font-style, and so on, in @ font-face.

The font-family in the @ font-face rule is slightly different from the font-fmaily in other styles. The font-family in @ font-face simply declares the name of the font (that is, the name of the custom font) and does not assign the font to the element. The font-family in the style, on the other hand, explicitly specifies the font name for the element. In the @ font-face rule, the font name is customized through font-family, and this self name can be any name or form, and it is only used for font-family attribute references in element styles. Of course, it is best to use the same font name as the referenced font file name to keep CSS readable and maintainable. The font name "NeuesBauenDemo" is declared by @ font-face above, but it will not have any practical effect. If you want the text font in Web to be NeuesBauenDemo, you need to reference the font defined by @ font-face in the corresponding element in the style code block. @ font-face is the same as @ keyframes. A @ font-face rule only defines one font. If you need to customize multiple fonts, you need to enable multiple @ font-face rules.

Declare the font source:

A very important parameter in the @ font-face rule is src, which is similar to the src attribute in the img tag, and its value is mainly used to link to the actual font file. In addition, multiple sources can be declared, and if the client's browser fails to find the first source, it will try to find the later font source in turn until an available font source is found, each font has its own specific function and format

1. TureType (. Ttf) format TureType (. Ttf) format fonts are the most common fonts for Windows and iOS, and are a RAW format.

2. OpenType. Otf) format OpenType (. Otf) format font is considered to be a primitive font format, which is built on the basis of TureType, so it also provides more features.

3. Web Open Font Format. Woff) format Web Open Font Format (.

4. Embedded Open Type (. Eot) format Embedded Open Type (. Eot) format fonts are IE-specific fonts that can be created from TrueType

5. SVG. Svg) format SVG (. Svg) format font is a format based on SVG font rendering

This means that at least two format fonts, ".woff" and ".eot", are needed in @ font-face, and even fonts such as ".svg" are needed to get support from more browsing versions. To make @ font-face more supported by browsers, Paul Irish wrote a unique @ font-face syntax called "Bulletproof@ font-face" (bulletproof font)

Create various fonts:

There is only one format font on hand, and in order to be compatible with all versions of the browser, you need to convert from one format font to the various font formats you need. So how do you convert fonts to fonts in all formats?

This will be one of the first issues to be solved before @ font-face defines fonts. So far, there are many tools for generating fonts for online conversion on the Internet.

-Fontsquirrel font conversion generator

-Codeandmore font conversion generator

Create an icon font:

Symbol fonts can use a dedicated font to create an application, such as Glyphs, but a requirement other than a professional typesetting tool or a requirement to build a simple icon font, such as a physical relationship between weight and weight, is not very important. IcoMoon comes with a large number of icons, and you can add more icons through the icon library, most of which are free to use (please check their license before using them). If you are looking for icons like "File download" and "Shopping cart", you will find that using standard icons is much more convenient than creating them yourself.

Prepare the illustration:

Make sure that each icon is the same size. Here, we have to reduce the width of the airship icon so that it can match other icons

1. Cleanup icon

Check each icon carefully to make sure they are free of defects-icons may look perfect when they are small, and you will find some small defects when you zoom in. In the (AI) Illustrator, use the Pathfinder tool to stack elements uniformly, subtracting the previous elements, such as the star icon in the icon. The principle is to make sure that the icon is small and readable.

two。 Import to SVG file

Now, select an icon and copy and paste it into a new document scene (such as 200px*200px). You will find that it has a baseline size setting. Use colored icons, such as black icons on a white background. Now, choose "Save" from the "File" menu to save the file in SVG file format. Use the default SVG settings. Once this is done, all icons can be created as a Web font.

3. Import to IcoMoon

Open IcoMoon Web App. Import an icon, click the "Import icons" button, and select the SVG file you want to add-you can add more than one file at a time. These icons will appear in the "Your Custom Icons" area. If they are highlighted in yellow, these icons are the icon fonts that will be created.

4. Export fonts from IcoMoon

To adjust the position, size, or rotation of the icon, click the "Edit" button and use "Save Copy" to save the image (such as a mirror icon). Then add a meaningful icon tag that will be used to generate the class name. When you are ready, click the "Font" button at the bottom of the screen to start generating fonts. This allows you to specify that icons are mapped to characters, for example, by setting up a set of six rotating balls that can be assigned the characters Q, w, e, r, t, and y, respectively. You can also choose a font name according to your hobby.

5. Download font file

Click "Download" to download the font package to your computer. There is even a JavaScript file and a workaround. If you need to support IE or IE7, copy the font file to the site and add fonts to the project. Need to be from style. Css and keep it as a separate CSS file. Introduce the CSS file into HTML when needed. You can find @ font-face in the CSS file that needs to change the URL path to a local relative path, or you can simply put the font file and style in the same folder.

Invoke the font style:

File index. Html, there are two ways to call

One is through characters (unicod or name)

The other is through the class name. First, use the custom property data- icon of HTML5.

The second method

Use a span element. If you want the icon to have a link function, you can put it in a link.

Here, add an iconlink class name and set a hover effect.

Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.