In this section, we will talk about font styles. When we were learning HTML, we learned some tags for bold and italic fonts, but the effect achieved by using tags is definitely not as convenient as the styles in CSS.
Next, we will introduce to you the use of the following attributes:
By learning the above CSS properties, we can set the font, size, style, italic, bold, etc. for the text in HTML.
font-family
The font-family attribute is used to set the font of an element. The font is Song, Kai, etc.
Through the font-family attribute, multiple fonts can be declared at the same time, separated by commas. According to the font calling principle, the first font will be called first. If it is not found, it will try to call the next font. If neither is found, the default font will be called.
Example:
For example, set the font for the text in the following <p> tag:
<p>Hello, Xia Ke Island</p>You can use a tag selector and then set it in the font-family property:
p{ font-family:'Times New Roman','sans-serif', Song style, Kai style;}When declaring fonts, we should declare English fonts and Chinese fonts separately, and the declaration of English fonts should be before the Chinese fonts. Because most Chinese fonts contain English letters, but they are not very beautiful, while English fonts do not contain Chinese characters. So if we don't want to use Chinese fonts to display English, we must remember to declare the English fonts first. The one declared first will be called first.
Commonly used English fonts: Arial, Helvetica, Tahoma, Verdana, Lucida Grande, Georgia, etc.
Commonly used Chinese fonts: SimSun, SimHei, Microsoft YaHei, FangSong, KaiTi, etc.
font-size
The font-size attribute is used to set the size of the font. The commonly used unit is px, which is pixels.
px is the abbreviation of Pixel, which is the smallest unit of a digital image or graphic that can be displayed and represented on a digital display device. Pixel is the basic logical unit in digital graphics, and pixel is also called image element.
Example:
For example, let's look at the following code (other HTML structure codes are not shown):
</p></body> The demonstration effect in the browser is:
Then at this time, we use font-size to set the font in the <h1> tag to 14px and the font in the <p> tag to 20px:
h1{ font-size: 14px;}p{ font-size: 20px;}The demonstration effect in the browser becomes as shown below:
Obviously, the font size in any tag can be set through the font-size property in CSS.
font-style
font-style sets the style of the font. You can set the font to italic, italic or normal font. An italic font is usually defined as an individual font within a font family.
Common attribute values for this genus are as follows:
Example:
To set the content in the following three <p> to different font styles, you can use class selectors:
<body> <p class="normal">Set the font to a standard font style</p> <p class="italic">Set the font to an italic font Style</p> <p class="oblique">Sets the font to an oblique font style</p></body>CSS style code:
.normal { font-style:normal;}.italic { font-style:italic;}.oblique { font-style:oblique;}The demonstration effect in the browser is as follows:
font-weight
The font-weight attribute sets the boldness of the font used in the text of the displayed element.
Common property values for this property are as follows:
Example:
Set the thickness of the following <p> tags to normal, bold, 700, and 900 respectively:
<p class="w1">Set the font to:normal</p><p class="w2">Set the font to:bold</p><p class ="w3">Set font to:700</p><p class="w4">Set font to:900</p>CSS style code:
.w1 { font-weight: normal;}.w2 { font-weight: bold;}.w3 { font-weight: 700;}.w4 { font-weight: 900;} Demonstrate the effect in the browser:
font
The font attribute is used to set all font attributes in one declaration, with spaces separating each attribute. That is, the comprehensive abbreviation attribute of the above attributes.
If we use the font attribute to set the font style, the setting order is: font-style, font-variant, font-weight, font-size/line-height, font-family. It is not necessary to set any of the values, and the unset properties will use their default values.
Example:
<p class="p1">The grass is long and the orioles are flying in February, and the willows are brushing against the embankments intoxicated by the spring smoke. </p><p class="p2">The butterflies dance all the time, and the orioles sing at ease. </p>CSS style code:
.p1{ font: italic bold 20px 'sans-serif', 楷体;}.p2{ font: bold 14px 'Arial', 宋体;}Demonstrate the effect in the browser:
Note that when using the font attribute, the values of font-size and font-family are required. If the values of these two properties are not set, it will not take effect.
Summary
The several attribute values studied in this section are the most basic attributes in CSS, especially the font-size attribute, which we will use frequently. Generally, browsers will have a default font size, such as 16px. When writing a page, if we want the text font size of most of the page content to be 12px or 14px, we will set it on the <body> tag, so that we do not need to use individual tags. Go to settings.
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/CSS-zi-ti-yang-shi.html
支付宝扫一扫 
评论列表（196条）
测试