css3--How to add font and color styles to text

Source: Internet
Author: User

This chapter will make the text in your Web page more beautiful.

Some properties about the text

    • font-family: Text font

    • Font-size: Text Size

    • Color: Text Colors

    • Font-weight: Text thickness

    • Text-decoration: More Styles of text

font-family (font family)

A total of five series: Sans-serif (sans serif), serif (lined), monospace (equal width), cursive (cursive ...) This is the intention), Fantasy (fantasy?) ) Look at the picture on the right

Font-family how to work in CSS

Body {Font-family:verdana, Geneva, Arial, Sans-serif;}
In the customer's computer to find there is no Verdana, if there is to use Verdana display text, if not, find there is no Geneva, if not yet find Arial, If you're not looking for a Sans-serif font in the client computer (generally, each machine has a sans-serif font, note: Sans-serif is not a specific font) If the font name contains a space, you can enclose that name in quotation marks, like this: font-family: "Courier New", Courier;

If I really want the user to be able to use the font I specify, and I don't know if the user has this font

Web Fonts come on!

How to use

    1. A font file was found: suffix Woff, svg, EOT, OTF, TTF

    2. Put this font on the Web, you can use Google's font hosting service, this is free

    3. Add @font-face property to CSS

      @font-face {font-family: "Emblema One"; Src:url ("www. a Web. com");} /* The URL is the font URL */

      This is the equivalent of creating a font named Emblema one on the user's machine.

    4. Use it like a local font, notice where you use the font after @font-family

The downside to this is that loading a font can take a little bit of time, so the first time a customer accesses your site and he doesn't have the font, it takes a little time.

Adjust font size

There are three font units: px (pixels),%, em (multiples, em=% divided by 100)
h1 {font-size:220%;}
There is also a way to specify font size-keywords (xx-small, x-small, small, medium, large, x-large, Xx-large) The size of each keyword is not certain, this is related to the client

So, how should I specify the size of the text?

First, the keyword can be defined by a good <body> text size, through the keyword can be the client side of the default size, this general his side of the usual size After that, using percentages or EM, you can adjust the size of other text relative to the <body> text size (for example, a headline), and it is not recommended to use PX pixels to indicate Font size, although you can accurately determine the size of the text but in the old version of IE will not support the zoom

Change font weight

There are five key sizes: Bold (bold), bolder (thicker), inherit (upper level of inheritance), lighter (smaller), normal (normal) There is also a number that sets the font-weight to 100 to 900 (a multiple of 100)

Add Style to Fonts

There are four kinds: inherit (Inherit father), Italic (italic), Normal (normal), oblique (inclined) The difference between italic and oblique is that the former is italic using this font, the display is in the font file, the latter is directly to the positive word oblique ... But it's almost like that.


Demo Settings <body> colors
Body {Background-color:red;background-color:rgb (80%, 40%, 0); Background-color:rgb (204, 102, 0); background-color:# 66CCFF;}
This is the four ways to set the color, the first is the keyword, this is usually used in elementary school students, support the color is not much The second is the use of RGB (red, green, blue) percentages, those percentages mean the amount of red/green/blue in turn (how to say, the larger the more it contains this color) The third and the second are similar, but changed from 0%~100% to 0~255. The last one is the hexadecimal code, meaning: The first two represent the red 16, the middle two are green, the last two are blue. Turning the hex into a 10 mechanism becomes the third way to set the color.

For text and backgrounds, use a larger contrast color, so that readability is good

Text Decorations (text-decoration)

Not much to say, directly look at the effect: Blink inherit line-through none Overline underline


CSS provides many properties to control the appearance of fonts, including font-family, Font-weight, font-size, Font-style, etc.

Font-family is a group of fonts with common characteristics

The font family for the web includes serif, Sans-serif, monospace, cursive, and fantasy. Serif and Sans-serif are most commonly used

The fonts that visitors see on your Web page depend on which fonts are installed on their own computers, unless you use Web fonts

It is a good idea to specify a candidate font in the Font-family CSS property in case the user does not have your preferred font installed

The last font is to be a generic font, such as serif or sans-serif, so that if no other font is found, the browser can replace the appropriate font

If you want to use a font, and by default the user may not have the font installed, you can use the @font-face rule

Font size is usually keyword, pixel px, percent, EM specified

If you use the image to specify the font size, you are telling the browser how many pixels the letter height is.

Em and% are relative font sizes, so using EM and% to specify font size means that the font size is determined relative to the font size of its parent element

Use relative font size to make your pages more maintainable

Use the font size keyword in the body rule to set the base font size so that if the user wants the text to be larger or smaller, all browsers can scale the font size proportionally.

You can use the Font-weight CSS property to set the text to bold

The Font-style property is used to create italic or italic text. Italic or italic text is skewed

Web colors are mixed with different amounts of red, green, and blue to get

If mixed red 100%, green 100%, blue 100% can get white, all 0% is black

CSS has 16 basic colors, and more than 150 expanded colors

You can use the red, green, and blue percentages to specify the color you want, or you can use a numeric value (0~255), or a 16 binary code

To find the hexadecimal code of the color you want, you can use the color selection tool of the picture editing app

The hexadecimal code that represents the color has 6 bits, each digit refers to 0~f, the first two indicate the number of red, the middle two is green, the last two are blue

You can use the Text-decoration property to create an underscore for this. Underlined documents are often mistaken for link text by users, so use this property with caution

Related Article

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.