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

This chapter can make the text in your web page more beautiful

About some properties of text

• font-family: Text font

• font-size: Text size

• color: Text color

• ##font- weight: text thickness

• text-decoration: more styles of text

##font-family(font family)

There are five series in total: sans-serif (no serif), serif (serif), monospace (equal width), cursive (cursive... this is the original intention), fantasy ( Fantasy?) See the image on the right

##How does font-family work in CSS

##

body {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

Check if there is Verdana in the client's computer. If so, use Verdana to display the text. If not, check if there is Geneva. If not, check for Arial. If still not, check if there is sans-serif in the client. Font (generally every computer has a sans-serif font. Note: sans-serif is not a specific font) If the font name contains spaces, you can put that Add quotation marks around the name, like this: font-family: "Courier New", Courier;

If I really want users to be able to use the font I specify, but I don’t know if the user has this font

Web font is here!

How to use

#Find a font file: the suffix name is woff, svg, eot, otf, ttf

1. To place this font on the web, you can use Google's font hosting service, which is free

2. Add the @font-face attribute in CSS

   @font-face {
   	font-family:"Emblema One";
   	src:url("www.某网站.com");
   }/*那个网址就是字体URL */

At this time, it is equivalent to creating a font named Emblema One on the user machine

3. Use it like a local font. Note that the place where you use the font must be @font After -family

#The disadvantage of this is that loading the font will take a while, so the first time a customer visits your website and he does not have this font, he will Take a moment

Adjust the font size

There are three font units: px (pixel), %, em (which is a multiple, em=% divided by 100 )

h1 {
	font-size:220%;
}

There is also a way to specify the font size - keywords (xx-small, x-small, small, medium, large, x-large, xx-large)The size represented by each keyword is not necessarily certain, this has something to do with the client

So, how should I specify the size of the text

First of all, you can define the text size of through keywords. Through keywords, you can get the default size on the client side, which is the commonly used size on the other side.

After that, use percentage or em to adjust the size of other text (such as first-level titles) relative to the text size of . It is not recommended to use px pixels here

Font size, although you can accurately determine the size of the text, scaling will not be supported in older versions of IE browsers

Change font thickness

There are five keyword sizes, namely: bold (bold), bolder (thicker), inherit (inherit the thickness of the previous level), lighter (thinner), normal ( Ordinary)

There is also a way to set the font-weight to a number between 100 and 900 (a multiple of 100 )

Add style to the font

There are four types: inherit (inherit dad), italic (italic), normal (normal), oblique (inclined)

The difference between italic and oblique is that the former uses the italics of this font and is displayed in the font file, while the latter directly italics the regular words. . . But it seems to be about the same

颜色

Demo设置的颜色

body {
	background-color:red;
	background-color:rgb(80%, 40%, 0%);
	background-color:rgb(204, 102, 0);
	background-color:#66ccff;
}

这是四种设置颜色的方法，第一种是关键字，这个一般是小学生在用的吧，支持的颜色不多

第二种是使用rgb（red、green、blue）百分比，那些百分比意思是依次是红/绿/蓝的量（怎么说呢，越大就越含有这个颜色）

第三种和第二种相似，只不过从0%~100%改成了0~255

最后一种是十六进制码，意思是：

前两个代表红的十六进制、中间两个是绿的、最后两个是蓝的

把十六进制转成10机制就变成了第三种设置颜色的方法了

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

    不多说，直接看效果：blink inherit line-through none overline underline

BULLET POINTS

• 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

• Font families used for the Web include serif, sans-serif, monospace, cursive , fantasy. serif and sans-serif are most commonly used

• The fonts your visitors see on your web pages depend on what fonts are installed on their own computers, unless you use web fonts

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

• The last font to be For a generic font, such as serif or sans-serif, so that if it cannot find another font, the browser can substitute the appropriate font

• If you want to use a certain font, While users may not have this font installed by default, you can use @font-face rules

• The font size is usually specified by keywords, pixels px, percentage, em

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

• ##em and % are relative font sizes, so use em When specifying a font size with %, it means that the font size is determined relative to the font size of its parent element

• Using relative font sizes can make your page 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 make text bold

• The font-style property is used to create italic or italic text. Italic or italic text is slanted

  

• Web colors are obtained by mixing different amounts of red, green, and blue

• If Mix red 100%, green 100%, blue 100% to get white, all 0% is black

• There are 16 basic colors in CSS, and more than 150 extended colors

• You can use red, green, and blue percentages to specify the color you want, or you can use numerical values ​​(0~255), or hexadecimal codes

• To find the hexadecimal code for the color you want, use the color picker tool in your image editing application.

• The hexadecimal code representing a color has 6 digits. Each bit is indexed from 0 to F. The first two represent the number of red, the middle two are green, and the last two are blue.

• You can use the text-decoration attribute Create an underscore for this. Underlined documents are often mistaken for link text by users, so use this attribute with caution

#

The above is the detailed content of CSS3--How to add font and color styles to text. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks ago By DDD

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1655

14

CakePHP Tutorial

1413

52

Laravel Tutorial

1306

25

PHP Tutorial

1252

29

C# Tutorial

1226

24

Show More