CSS DIV text font design

 CSS DIV text font design need to use CSS 's font-family property, which is a standard choice of font attributes, font-family can provide several font allows web browsers to determine which fonts can be displayed, a web designer With this feature of font-family , you can design multiple font sorts for DIV text at a time . Seeing this, some people may want to ask, can't CSS DIV fonts be designed by yourself? In fact, it is not easy to design a set of own text fonts. The text fonts of web pages are usually directly applied to the existing fonts in the computer or imported from other external fonts. For example, Google Web Fonts are very famous web text The font application tool uses the font-family property to apply text fonts to web pages . This tutorial will provide several different CSS DIV text font examples for your reference.

CSS DIV text font design example

<div style="font-family:serif;border:2px #ccc solid;padding:10px;">select serif font</div>
<div style="font-family:sans-serif;border:2px #ccc solid;padding:10px;">Select sans-serif font</div>
<div style="font-family:monospace;border:2px #ccc solid;padding:10px;">Select monospace font</div>
<div style="font-family:PMingLiU;border:2px #ccc solid;padding:10px;">Choose the new solid font</div>
<div style="font-family:DFKai-sb;border: 2px #ccc solid;padding:10px;">Choose standard regular font</div>

Present results

Choose serif font

Choose sans-serif font

Choose monospace font

Choose a new detailed font

Choose standard italics font

We have prepared five sets of DIV blocks with different text fonts. The fonts in each DIV block are designed with the attribute value of font-family . The first three fonts are safe fonts, almost all browsers Both of them are supported, and the last two new fonts and standard fonts belong to Microsoft fonts, which are built-in fonts in Windows. If you use iOS or Linux operating systems, they may require additional installation to display them. In addition to the examples, there are more font-family fonts available, please see: CSS font-family font .

➤Learn to help DIV design text fonts, do you want to add text color? Look at this article: CSS DIV text color design .