How to set font text in css

When it comes to the font attribute, what everyone thinks of must be text, so this article will take you to have a good understanding of CSS text settings, or learn about text style settings.

CSS can set the style of text. What are the css fonts?

font text directory

CSS text size

Color of text

DIV CSS text underline

DIV CSS text spacing

CSS text font

Text upper and lower line spacing

CSS font style (italic)

CSS word bolding method

DIV+CSS English words, upper and lower case letters

DIV+Css Setting fonts in development Common css attributes words English css font-can enter the CSS manual View more detailed CSS text knowledge
font, font-family (font), font-size (font size), font-style (font style), font-weight (css bold), text-decoration (underline), font-variant (letter case), text-transform (English case), letter-spacing (spacing)

Next , we explain one by one examplesThrough css text control method

1. Use font-size for font size

First set the value of font-size to 36px, then The results below show a larger font size.

2. The color of the text

The text color uses the css color color attribute and sets the color of the text style to red through the color update style value

3. Css to control the underline of the text Method css font, use text-decoration

text-decoration, you can go to the css manual to understand the corresponding values. You may also want to know about css links, css hyperlink styles, css underline

4. Text spacing - enter detailed CSS word spacing to understand

5. Text font - use the css style attribute font-family

General font-family The font can be the same as the common "Songti", "New Songti", and "Heishi". Please note that you cannot set the font style that does not participate. Although it may be possible to set the font on your own computer, most computer users have not added it. Fonts, so here the fonts can only be set to common fonts that come with the system, but not fonts installed by yourself, and Chinese fonts can be converted to Unicode encoding.
The computer comes with fonts, and commonly set text fonts include boldface, New Song Dynasty, Song Dynasty, Arial, Helvetica, sans-serif, etc.

6. The upper and lower line spacing of text

The upper and lower line spacing Use css text to set the word line-height. Here set line-height:50px;

You can see the demonstration css font text field "I am controlled by css text style demonstration" . "The distance from the context word is achieved through css line-height. Maybe you need to understand the difference between br and p.

7. Font style (italic)

Italic text is set using the font-style tag in the css style, such as font-style: italic. Of course, you can use the tag to change the text into Italics

##8. Bold text

To bold text, you can directly add before the text that needs to be bolded and add or to make the text bold. Here you can use css to control the boldness of the text. Font-weight is used here to set such as font-weight:bold;

The value of font-weight here can be from 100 to 900. The higher the value, the higher the value. The larger the font, the bolder it is. If the value is bold, it will be bolded normally. It has the same effect as using b or strong. The difference between b and strong is bold.

9. English words and letter case css font

Use the full size of font-variant letters in css, such as font-variant:small-caps;, and selective uppercase and lowercase text-transform, such as text-transform:capitalize;The first letter is capitalized.

text-transform syntax text-transform: none | capitalize | uppercase | lowercase

Parameters:
none: No conversion occurs
capitalize: Capitalize each The first letter of a word is converted to uppercase, and no conversion occurs for the rest
uppercase: Convert to uppercase
lowercase: Convert to lowercase

font-variant Syntax font-variant: normal | small-caps

Parameters:

normal: normal font
small-caps: small uppercase font

I believe I saw these You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use the transform gradient attribute in Css3

Summary of common units in css

How to use CSS3 attribute selectors to replace the role of JS

The above is the detailed content of How to set font text in css. For more information, please follow other related articles on the PHP Chinese website!