CSS span text font design

 The CSS span area can easily wrap the text we want to adjust for style design, which of course also includes the definition of the font of the text, such as changing the font in the span area to serif, sans-serif, monospace or even is a common Times new , marked in italics or Microsoft Jhenghei can do it, to make such an effect must use CSS 's font-family property, which is the standard font modify the properties, in addition to modify the span of text characters within the region In addition to the type, you can also modify the text fonts in other web pages, which are supported by almost all mainstream browsers. Let's take a look at the basic grammar rules first and then apply the examples to see the effect.

Basic syntax of CSS font-family property

font-family: font family first, second font, third font, ... and so on;

The font-family property of CSS allows designers to fill in multiple different text fonts at once. The browser will select the fonts that can be displayed according to the order. Assuming that the first font can be displayed, the following fonts will not be used If the first font cannot be displayed, the browser will pick the font with the second order in the font-family property to see if it can be displayed, and so on. For the detailed usage of the CSS font-family property, please See: CSS font-family font .

Use the font-family property to modify the font style of the text in the span area

<span style="font-family:serif;border:1px orange solid;margin-right:5px;">This is the text of serif font</span>
<span style="font-family:sans-serif;border :1px orange solid;margin-right:5px;">This is text in sans-serif font</span>
<span style="font-family:DFKai-sb;border:1px orange solid;margin-right:5px ;">This is text in italics</span>

The actual effect of the example

This is the text in serif font. This is the text in sans-serif font. This is the text in kai font.

There are a total of three different span areas in the example, and their text fonts have been redesigned using the font-family attribute. From left to right are serif fonts, sans-serif fonts, and standard italics. The more special one is the standard font. The italics may not be displayed in non-Window series operating systems. In addition, the border and margin in the example are the design attributes of the border and the outer distance respectively, which are used to design the distance between the border of the span and each other to make the example look clearer. That's it.