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

Last Update:2014-08-23 Source: Internet

Author: User

Tags translate pdf

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

<Html>
<Head>
<Link rel = "stylesheet" type = "text/css" href = "http://fonts.googleapis.com/css? Family = Tangerine ">
<Style>
Body {
Font-family: 'tangerine', serif;
Font-size: 48px;
}
</Style>
</Head>
<Body>
<H1> Making the Web Beautiful! </H1>
</Body>
</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

Body {
Font-family: 'tangerine', serif;
Font-size: 48px;
Text-shadow: 4px 4px 4px # aaa;
}

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

<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

CSS selector {
Font-family: 'font name', serif;
}

Or use an embedded style on this node.

Html code

<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

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

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

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

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

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

Html code

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

Html code

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

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

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.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More