The original link: https://github.com/bsdfzzzy/iconfont-all-in-one
Do IconFont in one go
What is a IconFont
The background of the IconFont
WebFont
Images
CSS Sprites
IconFont
IconFont principle
Pros and cons of IconFont
advantages
insufficient
Quickly use an existing IconFont
Create your own IconFont
Using software generation
Using web site generation
Using script Generation
.ttf,.eot,.woff font files
Reference
What is a IconFont
As the name suggests, an IconFont is a font icon. Strictly speaking, they are typefaces, but they do not contain letters or numbers. Instead, they contain symbols and glyphs. You can use CSS to set styles just like regular text, making IconFont a popular choice for ICONS in Web development.
The background of the IconFont
WebFont
As we all know, different fonts are often used in web pages, such as Microsoft yahei, 宋体, Aria and so on. When we write CSS styles, font family can specify the font name of the element. We call this type of font WebFont. But the traditional Web developer has limited font choices. There are only a few fonts that are guaranteed to work on all public systems — these are known as Web-safe fonts. We could use the font stack to specify alternative fonts, followed by web-safe alternatives, and then the default system font, but this adds testing overhead to ensure that our design works in every font. **Web Fonts are a CSS feature that allows you to specify font files that are downloaded with your site when you visit it. ** First, there is a @font-face block at the beginning of the CSS that specifies the font file to download:
@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
Copy the code
Then we can use the font we defined.
html {
font-family: "myFont";
}
Copy the code
Images
A sound website, can not say a variety of ICONS, the traditional way to add ICONS is pictures, but there are many disadvantages of using pictures, mainly manifested in the following three aspects:
Added a page request
The size and color of the picture are not easy to change
In order to increase the sharpness, the picture is bigger and bigger
CSS Sprites
To reduce the number of image requests and improve performance, we might use Sprite images: Integrate some small pictures in the web page into an image file, and then use the BACKground-image attribute of CSS to insert the image, and then use the background-position attribute to accurately locate the part needed by the image. The problem with Sprite is that it is suitable for fixed feature sites. Adding and replacing Sprite images becomes tedious if we add new features to the site every once in a while.
IconFont
All of these technologies have their drawbacks. The IconFont was born out of the need for performance and convenience. IconFont is used in the same way as WebFont, turning a large number of ICONS into a font file, reducing the number of requests and reducing the size of requests. When a web page has its own icon font library, can be reused in many places, reduce a lot of secondary development costs. Therefore, modern web pages will use IconFont to display ICONS, so how to use and generate IconFont has become a front-end developer must know the ability.
Pros and cons of IconFont
advantages
You can easily apply any CSS effect to them.
Because they are vector shapes, they are scalable. That means we can scale them without losing mass.
We only need to send one or a small number of HTTP requests to load them, as opposed to images, which may require multiple HTTP requests.
Because of their small size, they load quickly.
They are supported in all browsers (even up to IE6).
insufficient
Cannot be used to display complex images
It’s usually limited to one color, unless you apply some CSS tricks
Font ICONS are usually designed according to a specific grid, such as 16×16, 32×32, 48×48, etc. If you change the grid system to 25×25 for some reason, you may not get clear results
IconFont principle
IconFont is based on the @font-face attribute of the CSS. This property is used to define a new font. The basic usage is as follows
SRC: [url] Load font, which can be a relative path, an absolute path, or a network address. [format] Specifies the format of a font to help browsers recognize it. The value can be trueType (.ttf), opentype(.otf), trueType-aat, Embedded – Opentype (.eot), SVG (.svg), woff(.woff).
Font-weight: Defines the bold style.
Font-style: define the font style.
Format Corresponds to the font format and common compatible writing methods:
Previous versions of Internet Explorer 9 did not parse font declarations according to the standard, and when the SRC attribute contained multiple urls, it failed to parse correctly and returned a 404 error, while other browsers automatically adopted their own urls. So put the EOT format that was only supported before IE9 in the first place and add? To the url. , so that versions prior to IE9 would take the content after the question mark as a URL parameter. As for #iefix, it acts as a comment and can turn URL parameters into anchors, reducing the number of characters sent to the server.
Why are there two SRC’s?
In most cases, the first SRC can be removed unless compatibility mode is supported in IE9. In IE9, pages can be rendered using IE7 and IE8 modes. Microsoft has modified the CSS parser in compatibility mode, resulting in the use of? The scheme is invalid. Since the CSS interpreter parses from the bottom up, adding a SRC attribute without a question mark above it solves this problem.
Once you have defined your own font-face, you have a new IconFont. Give the object you want to use this IconFont the corresponding font-family.
.example {
font-family: 'defineName';
content: '/e103';
}
Copy the code
This example will render the selected element of Example as the icon corresponding to /e103.
Quickly use an existing IconFont
IconFont is already a mature technology, the most commonly used in China is Ali MUX, and the most commonly used abroad are Font-awesome and Material Design (need to cross the wall).
There are a lot of tutorials for direct use of IconFont, but here are a few I think are good ones.
Ali IconFont:
Zhihu answer
Cloud community: The right way to use Alibaba iconFont
The Font – Awesome:
How to use the Font Awesome icon
Rookie tutorial: Font Awesome icon
The official documentation
Material Icons:
Material Design Icons
Create your own IconFont
This explains how to use IconFont. When we’re developing a larger website, we probably want to be a bit more user-friendly (or a bit more unconventional). What are some ways we can develop our own IconFont?
Using software generation
I personally am not good at software generation, so here are two ok tutorials
One, from 2016, is a relatively new, IconFont
One is from 2014, but it provides four methods of software development, and four kinds of creation methods of Icon font
Using web site generation
Here are two examples: Ali IconFont and IComoon
Ali IconFont above [use existing IconFont](# quickly use existing IconFont) zhihu answer has a detailed step, here will not elaborate.
The following is a screenshot of icomoon usage.
Choose a few random ICONS, such as the first four
Select Generate Font in the lower right corner
Click Download to Download a compressed package that looks like this
Eot/SVG/TTF/wOFF/TTF/WOFF/EOT/SVG/TTF/WOFF
Using script Generation
For front-end developers, it is the most happy thing to find a plugin that supports the generation of IconFont. Fortunately, we found gulp-iconfont. Gulp-iconfont can automatically generate IconFont files with gulp-iconfont CSS.
In addition to the gulp plug-in, there is another tool, WebfontLoader
Their documentation is very good, follow the tutorial can complete the script configuration, we have implemented the above scheme in several projects, time and again successful
.ttf,.eot,.woff font files
Because of the font types used in web pages, browsers have different support specifications for font types. Font format types mainly fall into several categories: TrueType, Embedded OpenType, OpenType, WOFF and SVG.
TrueType
The most commonly used font formats for Windows and Mac systems are contours based fonts defined by a mathematical model, which makes them easier to process than vector-based fonts and ensures consistency between the screen and the printed output. Also, like vector fonts, they can be scaled and rotated without worrying about jagged edges.
EOT — Embedded Open Type (.eot)
EOT is an embedded font technology developed by Microsoft. Allows OpenType fonts to be embedded in a web page with @font-face and downloaded to a browser rendering, stored in a temporary installation folder.
OpenType(.otf)
OpenType is a font developed jointly by Microsoft and Adobe and used exclusively in Microsoft’s Internet Explorer browser. Dedicated to replacing TrueType fonts.
WOFF – WebOpen Font Format (WOFF)
WOFF (Font Format for Web Development) is a font format standard specifically designed for the Web. It is actually a wrapper around font formats such as TrueType/OpenType. Each font file contains fonts and Metadata for fonts.
SVG (Scalable Vector Graphics) Fonts (.svg)
SVG is an open standard graphics format developed by the W3C. SVG fonts are used to render fonts using SVG technology, and there is also a GZIP compressed SVG font SVGZ.
