Google Font [translated from Google official documentation], Google font

Source: Internet
Author: User
Tags translate pdf

Google Font [translated from Google official documentation], Google font

This Guide explains how to use Google Font APIs to add network fonts to your own pages. You don't need any encoding. All you have to do is add a specific CSS to the HTML page and associate the font with the CSS style.

A quick example: 

This is an example. Copy the following HTML code to a file:

Html code
  1. <Html>
  2. <Head>
  3. <Link rel = "stylesheet" type = "text/css" href = "http://fonts.googleapis.com/css? Family = Tangerine ">
  4. <Style>
  5. Body {
  6. Font-family: 'tangerine', serif;
  7. Font-size: 48px;
  8. }
  9. </Style>
  10. </Head>
  11. <Body>
  12. <H1> Making the Web Beautiful! </H1>
  13. </Body>
  14. </Html>

 

Open the HTML file in a modern browser and you will see the page shown as follows, using a font called "Tangerine:


 
The sentence is a common text, so you can use CSS to change its style. Try to add a shadow style in the previous example:

Html code
  1. Body {
  2. Font-family: 'tangerine', serif;
  3. Font-size: 48px;
  4. Text-shadow: 4px 4px 4px # aaa;
  5. }

 

As you can see, there is a shadow under the text:


This is just the beginning when you can use the font API and CSS to do things.

Overview: 
You only need two steps to start using the Google font API:
1. Add a style sheet to request the network font

Html code
  1. <Link rel = "stylesheet" type = "text/css" href = "http://fonts.googleapis.com/css? Family = Font + Name ">

2. Similarly, define a node in a style sheet that uses the requested network font

Html code
  1. CSS selector {
  2. Font-family: 'font name', serif;
  3. }

 

Or use an embedded style on this node.

Html code
  1. <Div style = "font-family: 'font name', serif;"> Your text </div>

Note:When defining a network font in a CSS style sheet, you always need to list at least one fallback web-safe font to avoid unwanted behavior. In particular, add a default CSS font at the end of the list, such as the font "serif" or "sans-serif. In this way, the browser can roll back to its default font when necessary.


For more information about the network fonts that you can use, see Google fonts.


Specify the font set and style in the style sheet URL: 

To determine the URL used in your style sheet connection, you must start with the basic URL of the Google font API:

Html code
  1. Http://fonts.googleapis.com/css

Then add the URL parameter of the font set to use the name and style of one or more font sets.
For example, to request the Inconsolata Font:

Html code
  1. Http://fonts.googleapis.com/css? Family = Inconsolata

 Note:Replace all spaces in the font set name with the plus sign (+.

To request multiple font sets, use vertical bars (|) to separate names.
For example, to request three fonts: Tangerine, Inconsolata, and Droid Sans:

Html code
  1. Http://fonts.googleapis.com/css? Family = Tangerine | Inconsolata | Droid + Sans

 
Multiple fonts are requested, allowing you to use all these fonts on your page. (But you should not go too far. Most pages do not need a lot of fonts, and the request for many fonts will slow your page loading .)
By default, the font API provides a normal version of the requested font. To request other styles or sizes, add a colon (:) next to the font name and separate the styles and sizes following the comma.
For example:

Html code
  1. Http://fonts.googleapis.com/css? Family = Tangerine: bold, bolditalic | Inconsolata: italic | Droid + Sans

To know the size and style of the provided fonts, You need to query the Google font directory.
For each style you request, you can provide both the full name and abbreviation. For the size, you can specify another number:

Style Symbol
Italics Italic or I
Bold Bold, B, or a number, like 700
Bold italic Bolditalic or bi


For example, to request "Cantarell" italic and "Droid Serif" bold, you can use any of the following urls:

Html code
  1. Http://fonts.googleapis.com/css? Family = Cantarell: italic | Droid + Serif: bold

 

Html code
  1. Http://fonts.googleapis.com/css? Family = Cantarell: I | Droid + Serif: B

 

Html code
  1. Http://fonts.googleapis.com/css? Family = Cantarell: I | Droid + Serif: 700

Specify a subset of scripts:

Some fonts support multiple types of scripts in the Google font directory (such as Latin and silel). to specify which subset will be downloaded, you need to add a subset parameter after the URL.

For example, if you specify a subset of Syl for the Philosopher font, the URL should be written:

Html code
  1. Http://fonts.googleapis.com/css? Family = Philosopher & subset = cyrillic

For the Philosophe font, request the subset of Latin and Spanish. The URL should be written:

Html code
  1. Http://fonts.googleapis.com/css? Family = Philosopher & subset = latin, cyrillic

For a complete list of fonts and font subsets, refer to the Google font directory.

 

 

From Google official documentation, the original connection: http://code.google.com/intl/zh-CN/apis/webfonts/docs/getting_started.html

Although the official connection is zh-CN, but it is still in English, I translated it myself, it is not good to translate .....


In addition to GOOGLE, is there any software that can translate PDF documents online? GOOGLE only translated the previous pages, followed by English.

The translation is not just google. You can try "youdao translation". I think that translation is quite reliable, and I suggest you convert the pdf file, it is better to convert it to word or other document processing, so that it is not restricted by software. There are many translation software with limited vision.

What is the font in the GOOGLE translation box?

This is the default font of the system. Yes, English is, because this is the default Dictionary of the system. If your system dictionary is damaged, the Chinese will be replaced by other fonts or boxes, and the letters are usually displayed in Tahoma.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.