Use Google Fonts to add beautiful fonts to your Web page _web

Question: If non-standard fonts are used in the design, how do you implement

Two ways:

The first use of pictures instead but certainly no text effect is good, not conducive to SEO

The second is the use of online fonts Google most networks will be wall, this time can be used Typekit.

Http://www.chinaz.com/free/2012/0815/269267.shtml

Original address: https://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/

Online fonts provide a rich variety of font styles that make the page more beautiful and appealing. Google Fonts is an open source online font library that is simple and fast to use. Objective

Text is a very important part of a Web page. Choose a suitable font for the text to better show the personality of a website, express the message to be delivered, and attract users to generate interest.

When it comes to fonts, we first think of the font in CSS, for example:

 
In this HTML code to define the font for <p> tags, when the browser parsing <p>some text</p> tag, first in the system to find Arial this font, if not found, find Helvetica font, If you still can't find it, you will find the browser's default Sans-serif (not serif) font, and then render the text.

Back to the top of the page what is a safe font

The concept of safe fonts, perhaps a lot of people are not very familiar with, we first give an example:

Font-family:arial, Helvetica, Sans-serif;
 
The definition of the font (font-family) is a secure font. Each operating system has its own default installed font, and the browser can only display the fonts installed on the operating system normally. The different operating system defaults installed fonts are not exactly the same, and some even names are different, in this case, we must define a safe font, so that the font in all browsers can be displayed correctly.

In the above definition of font-family, we choose Arial as the preferred font (note: Arial is the most common sans serif font, also the default font for Windows, which is not easy to read when the font is very small), but there is no such font in the Apple system. So we chose Helvetica (similar to Arial) as the second alternative font, and finally we chose Sans-serif as the third alternative font, if in a system where neither Arial nor Helvetica, the browser would use the default Sans-serif font to render text. In this way, we guarantee to a large extent that visitors with different operating systems will be able to see the same (or at least similar) page text.

In addition to Arial, Common Security fonts are: Verdana fonts, which are one of Microsoft's core fonts, developed specifically for on-screen display. It is widely used, wide and easy to read, is the clearest font in the monitor. CSS notation: Font-family:verdana, Geneva, Sans-serif; Times New Roman Font, which is the most commonly used serif font, is the default browser font. Small characters are also very poor in readability. CSS writing: font-family: ' Times New Roman ', the Times, serif;

Interested readers can use this link to check out the most commonly used security fonts. Http://www.w3schools.com/cssref/css_websafe_fonts.asp

In web development, you should try to use a secure font, which is a highly versatile font, so that visitors can read all the content of the page smoothly.

However, web designers will not be satisfied with the use of these secure fonts, how to use beautiful fonts, and in the ordinary user's browser can be properly rendered. The answer is: Use the @font-face scheme.

Back to the top @font-face label Introduction

@font-face is listed as a new feature of CSS3, it is not a fresh technique, it appeared first in CSS2 's normative definition, but was deleted in CSS2.1 and is now officially included in CSS3. The current mainstream browser (IE 4+/firefox 3.5+/chrome 1+/safari 3.1+/opera 10+) can support this property, so don't worry about browser compatibility issues.

@font-face allows you to use fonts that are not installed on your computer in your Web page to completely get rid of the security font restrictions. Simply install the font pack on the server, and when the user loads the page, the font pack is automatically downloaded to the user's machine to ensure that the font is properly rendered.

With the constant popularity of @font-face, many new font format icon sets are produced, called network fonts. The Google Fonts API is an excellent network font library based on @font-face features.

The advantages of network fonts are many: the use of real text, rather than pictures, zooming in and out will not affect the rendering effect, the user experience is good, can be identified by the search engine, not like the picture each need to regenerate, add delete more convenient.

Back to the top how to use the Google Fonts API

Google Fonts offers more than 600 types of high-quality fonts, all browsers are compatible, without the need to introduce JavaScript, easy to use, and more importantly, free. (although Chinese fonts are not supported at the moment, because the Chinese font library is too large).

Now look at how you can use Google Fonts in your Web pages. Pick fonts

Login to Google Fonts (Google Font official website). (Figure 1) Figure 1.Google Fonts homepage

On the home page, you can browse through all the fonts directly, you can view them in a single word, or you can see the overall effect by the paragraph in the sentence, and you could resize the font. If you are familiar with font classification, you can use the search criteria on the left to filter the font. After you find your favorite font, click the "Add to Collection" button, and then in the "Collection" below the page, you can find all the fonts you added. Use the selected font to test your text

In the "Collection" of the previous page (Figure 1), click "Review". In the preview page (Figure 2), enter your test text to see the effect. Also on the "Review" page, you can adjust other font-related styles, such as font size, spacing, transformations, and so on. In Figure 2, we chose to test the "condiment" font figure 2.Google Fonts preview page to add a font link to your Web page.


If you are sure that the font is used, in the "Collection" below the page, click the Use button, and in the next page you will see a detailed description, including the font link and how to add the font to your Web page.

There are three ways to add font Links: Standard way:

<link rel= ' stylesheet ' type= ' text/css ' href= ' http://fonts.googleapis.com/css?family=Condiment '
>
@import Way:
@import URL (http://fonts.googleapis.com/css?family=Condiment);
JavaScript mode:
(by adding dynamic scripts and executing to import fonts, code omitted)

The next step is to define the font used on that label, for example: use on the <class= "MyHeader" > Label,

. myheader {font-family: ' condiment ', cursive;}

Now you can open your Web page and enjoy it (Figure 3). Figure 3. Test page effect Listing 1. Test page code

Optimize Font pack loading
If you are not a wide range of Web pages in the use of Google fonts, only in the title or logo, then you can add text parameters in the URL to limit the size of the loaded font pack, the maximum can reduce the size of about 90%, in order to save the download flow. For example: http://fonts.googleapis.com/css?family= condiment ' &text=hello

In this way, you will only download the four-letter H,e,l,o font, greatly reducing the size of the font package. Download Font Packs

You can also download and install the font packs locally so that you can use them locally, such as in Notepad,microsoft Office.

To: In Figure 3, click the Download button and select the "Download the font families in your Collection as a ZIP file" Advanced application API

Google Fonts also opens up some interfaces, called the Developer API, to get the information data for the font library.

For example, real-time access to the font library is actually available fonts and related information:

Https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

The return result of this request is a JSON-type data that includes the name of each font, style type (e.g. Regular,italic), version, modification time, the requested address of the containing style package, and so on.

Note that there is a key in the URL that is associated with your Web application project, and only registered Web applications can successfully invoke the Developer API. We have to register with the Google Cloud Console before we can get this key.

For this Developer API, you can see this link.

Back to first closing

Google Fonts is very powerful, but also encountered a number of loading problems, preferably the font statement, in the end to add a safe font, to ensure foolproof. Another suggestion is to use the appropriate pattern fonts in the Web page to keep the entire page clean and concise.