CSS3 (v) Web font and Sprite

• First, the Web font
• 1.1. What is Font-face
• 1.2. Font-face Advantages
• 1.3. Font format
• 1.4. Using @font-face
• 1.4.1, download fonts
• 1.4.2, using Font-face to bring fonts into the web
• 1.4.3, applying fonts
• 1.4.4, font format conversion
• 1.4.5, viewing font encoding
• 1.4.6, base64 embedded fonts
• Second, CSS Sprite
• 2.1. Merging small pictures
• 2.2. Using CSS to separate pictures
• 2.3. Summary
• Third, sample download

First, the Web font

Web font is a font technology applied to the Web, using Font-face to define new fonts in CSS. First understand the fonts in the operating system:

A), after the installation of the operating system, will be installed by default some fonts, these font files describe the shape of each text, the general Chinese file is large, the English file is small, because the number of characters, in the control Panel can find the text folder, under the C:\Windows\Fonts can also be directly found. In addition, if you want to have a richer font on your computer, you can download the new font file and copy it to the location.

b), the font we display in the document should be found in the system to be able to display the normal, such as you use in Word bold words, but the word file to another person, his computer is not in bold words, at this time can not be in boldface normal display, the Web page is the same. In order for the page to display fonts that are not locally available, we can use Font-face, which is not a technique that CSS3 initiated, as early as in IE5.

1.1. What is Font-face

@font-face is able to load the server-side font file, allowing the client to display fonts that the client does not have installed, and can implement vector icons. As shown below:

Microsoft's IE4 is already starting to support this property, but it only supports Microsoft's own. EOT (Embedded Open Type) format, and other browsers do not support this font format until now. However, starting with Safari 3.1, Web refactoring engineers can already set the. TTF (TrueType) and. OTF (OpenType) fonts as custom fonts.

1.2. Font-face Advantages

Scalability (Scalability):
The font-based icon is a technology that is independent of resolution and can scale to any desired degree. Your icons don't seem to care about retina,hdpi,xhdpi and so on screen, but the rendering will automatically adjust according to the target device, you will be able to deal with any current, future, or most arbitrary specifications of the device

Size (size):
Crop to the correct proportions, the icon font's file size than the bitmap is incredibly small, when using the icon font, you do not need to prepare different images according to different devices, your app only need to load the icon font file at startup.

Maintainability (maintainability):
Since your icon is packaged into a font file, you only need to maintain this single font file throughout the project.
By managing font files you can naturally organize your icon collections, modify or extend them arbitrarily.

Scalability (Adoption):
However, applying such an icon fonts may affect the workflow between you and your colleagues, but convincing them to adopt such a technique is also very simple, with several free or paid tools to help you easily achieve your goals and see good application results, in almost any mobile platform, browser or operating system
Flexibility (flexibility):
One of the most significant capabilities in applying the icon fonts technology is the ability to manipulate the icon fonts, change the color, size, and just a few lines of code to change the appearance in an instant
Interoperability (interactivity):
With flexibility and easy-to-code manipulation, icon fonts is uniquely manipulated at runtime, and by applying the icon fonts technology, you can easily display different effects and create animations in different states.

1.3. Font format

1.3.1, Turetype (. ttf) Format:
The. TTF font is the most common font for Windows and Mac, is a raw format, so he is not optimized for websites, and browsers that support this font have "Ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios Mobile Safari4.2+ ";
1.3.2, OpenType (. OTF) Format:
The. OTF font is considered to be an original font format, built on a turetype basis, so it also provides more functionality, and browsers that support this font have "Firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios Mobile safari4.2+ ";
1.3.3, Web Open Font format (. Woff):
The. Woff font is the best format for Web fonts, he is a compressed version of an open Truetype/opentype, and also supports the separation of meta-packages, browsers that support this font have "ie9+,firefox3.5+,chrome6+,safari3.6+ , opera11.1+ ";
1.3.4, Embedded Open Type (. EoT) Format:
. EOT fonts are IE-specific fonts that can be created from TrueType fonts and browsers that support this font have "ie4+";
1.3.5, SVG (. svg) Format:
The. svg font is a format based on SVG font rendering, and browsers that support this font have "Chrome4+,safari3.1+,opera10.0+,ios Mobile safari3.2+".
This means that at least we need to be in the @font-face. Woff,.eot two format fonts, and even require. svg and other fonts to support more than one browsing version

1.4. Using @font-face

@font-face {
Font-family: <YourWebFontName>; SRC: <source> [<format>][,<source> [<format>]]*; [Font-weight: <weight>]; [Font-style: <style>];
}
1, Yourwebfontname: This value refers to your custom font name, preferably using the default font you downloaded, he will be referenced to your web elements in the font-family. such as "font-family:" Yourwebfontname ";"
2, Source: This value refers to your custom font storage path, can be a relative path can also be the absolute path;
3, Format: This value refers to the format of your custom font, mainly used to help the browser to identify, the value of the following main types: Truetype,opentype,truetype-aat,embedded-opentype,avg, etc.;
4, weight, and style:weight define whether the font is bold, style primarily defines the font style, such as italic.

1.4.1, download fonts

Online There are many free icon fonts that can be downloaded locally, here to: http://fontello.com/download fonts as shown in:

extracted fonts such as related files:

1.4.2, using Font-face to bring fonts into the web

First copy the font file to the project's font folder with the following CSS styles:

            @font-face {              font-family: ' Iconfont ';  /* Font name *              /Src:url (' font/fontello.eot?53711433 ');  /* Font file path */              Src:url (' font/fontello.eot?53711433#iefix ') format (' Embedded-opentype '),                   url (' font/ fontello.woff2?53711433 ') format (' Woff2 '),                   url (' font/fontello.woff?53711433 '), Format (' Woff '),                   url (' font/ fontello.ttf?53711433 ') format (' TrueType '),                   url (' Font/fontello.svg?53711433#fontello ') format (' SVG ');              Font-weight:normal;  /* Bold */              font-style:normal;  /* Glyph, such as italic */        }

1.4.3, applying fonts

Find the corresponding font encoding:

Here you can convert the 16-character encoding into 10, or you can use the 16-binary Unicode encoding, but you need x to start with the following code:

<! DOCTYPE html>
Operation Result:
The above example has some shortcomings, because every time you need to query the code, it is troublesome, you can use pseudo-elements to write content directly in the CSS, has been written repeatedly used. The code for the simple improvement is as follows:
<! DOCTYPE html>
Operation Result:
Still normal under IE8:
The CSS of the icon website is actually enough:
View Code1.4.4, font format conversion
Sometimes we have only one font file in hand, but the Web font is often required to support multiple formats in order to be compatible, typically at least 2 kinds, one to consider IE browser, one to consider a modern browser. You can use the following tools to achieve online font conversion, the basic method is to upload fonts, online Service Web site to convert a font file into multiple font files after downloading.
The commonly used font conversion online tool is as follows:
Https://www.fontsquirrel.com/tools/webfont-generator
https://everythingfonts.com/
http://www.freefontconverter.com/
http://www.font2web.com/
Here, for example, the test results are as follows: Webfont-generator
First download the font, the English font can go "http://www.dafont.com/" Download, the font is very much, you can search by demand, here download a cartoon 3D font.
Upload the downloaded font to:
Download site generated content decompression, found that the use of Google's jquery, need to replace, the results are as follows:
Introduce fonts into Web projects, copy font files, add CSS styles, apply styles, and sample code like this:
View Code
Operation Result:
Common Online Tools: http://tool.lu/
Font Download: http://www.dafont.com/
1.4.5, viewing font encoding
Sometimes we have an icon font file on hand, but we do not know his corresponding code, the online tool can detect some, but sometimes found that the online tool is not able to detect all the code, using the tool: Fontcreator, not only can create their own fonts can also see the details of the font.
1.4.6, base64 embedded fonts
Some small font files can be directly encoded into Base64 to put characters in the CSS file, let CSS directly parse, this method can reduce some client requests, pictures and font files can do this, as follows:
The first step is to convert the font file to Base64 encoding, and of course you can convert the base64 encoding backwards into a font file, using the online tool:
Http://www.motobit.com/util/base64-decoder-encoder.asp
The second copy of the encoding into a CSS file, the rest of the steps are the same as the previous use of Web font, the example is as follows:
Operation Result:
https://www.web-font-generator.com/
Second, CSS Sprite
CSS sprites, also known as the CSS Wizard, some people call Sprite diagram, is the Web page loaded image processing technology. In a Web page may have more than a small picture, superscript, etc., will send multiple requests to the server, the more requests, the more the pressure on the server, the wizard technology is the first to combine a number of small pictures into a picture, and then separate in the CSS as a number of small pictures of a technology. As shown in the following:
2.1. Merging small pictures
You can use the online merge, or you can use Photoshop to merge, the more convenient way is to use some gadgets, such as "CSS Sprite tools", "CSS Satyr", "Iwangx"
2.2. Using CSS to separate pictures
In order to detach a picture, you need to understand the Background-position property first:
Role: Set or retrieve the background image location of an object, you must first specify < ' Background-image ' > Properties
background-position:<position> [, <position>]*
<position> = [Left | center | right | top | bottom | <percentage> | <length>] | [Left | center | right | <percentage> | <length>] [Top | center | bottom | <percentage> | <length>] | [Center | [Left | right] [<percentage> | <length>]? ] && [Center | [Top | bottom] [<percentage> | <length>]? ]
Default value: 0% 0%, effect equivalent to left top
Applies to: all elements
<percentage>: Specifies the position of the background image fill with a percentage. Can be a negative value. Its reference size is the container size minus the background picture size
<length>: Specifies the position of the background image fill with a length value. Can be a negative value.
Center: The background image is centered horizontally and vertically.
Left: The background image is filled in the landscape, starting from the top.
Right: The background image fills in the landscape and starts from the left.
Top: The background image is filled vertically, starting at the top.
Bottom: The background image is filled vertically, starting at the bottom.
Example code:
<! DOCTYPE html>
No effect when offset:
Effect on negative offset:
According to the above method can be located anywhere in the picture to start selecting the background, can be controlled by the size of the div will select the picture high-width, examples are as follows:
<! DOCTYPE html>
Operation Result:
Because the first picture and the width of the second small picture is 64px, so let the big picture to the left first move 128 pixels, the Y axis does not need to move, in fact, the creation of merged images of the tool has already prepared the CSS, the script is as follows:
. Ban{background:url (.. /imgs/allbgs.png) no-repeat-1px 0px;width:64px;padding-top:66px;}. Basket{background:url (.. /imgs/allbgs.png) no-repeat-64px 0px;width:64px;padding-top:66px;}. Bell{background:url (.. /imgs/allbgs.png) no-repeat-128px 0px;width:56px;padding-top:66px;}. Anchor{background:url (.. /imgs/allbgs.png) no-repeat-184px 0px;width:52px;padding-top:66px;}. Archive{background:url (.. /imgs/allbgs.png) no-repeat-236px 0px;width:64px;padding-top:66px;}. Archive2{background:url (.. /imgs/allbgs.png) no-repeat-301px 0px;width:64px;padding-top:66px;}
However, the CSS above can be optimized to split each icon into two class styles.
2.3. Summary
CSS sprites is well worth learning and applying, especially if the page has a lot of small icon (icons), but if you need to choose to use CSS Sprite technology, you need to understand its pros and cons.
Advantages:
A), the use of CSS sprites can be a good way to reduce the Web page HTTP requests, thereby greatly improve the performance of the page, which is the greatest advantage of CSS sprites, but also its widely spread and application of the main reason;
b), CSS sprites can reduce the number of bytes of the picture, once compared to 3 pictures merged into 1 pictures of the byte is always less than the total number of bytes of these 3 pictures.
c), to solve the problem of Web designers in the name of the picture, just a set of pictures on the name on it, do not need to name every small element, thus improving the production efficiency of the page.
d), change style convenient, only need to change the color or style of the picture on one or fewer pictures, the whole page style can be changed. More convenient to maintain.
Disadvantages:
1. When the picture is merged, you should combine multiple pictures into one picture in an orderly manner, and leave enough space to prevent unnecessary background in the plate. These are good, the most painful is in the widescreen, high-resolution screen of the adaptive page, your picture if not wide enough, it is easy to appear background break;
2.CSS Sprites is a hassle when developing, you need to measure the exact position of each background unit using Photoshop or other tools.
3.CSS sprites in the maintenance of time is more troublesome, if the page background has a little change, generally want to change this merged picture, need not change the place best not move, so avoid changing more CSS, if in the original place, and can only (best) add pictures, so the picture of the byte increases, and change the CSS.
CSS3 (v) Web font and Sprite