How to set font style in CSS
In web pages, we often set the font for the text in the web page. Use the font-family attribute to set the font style. So today we will teach you how to set up html fonts to css fonts.
Original html font setting
Html text font setting code:
<font face="黑体">我是黑体字</font>
CSS font setting
CSS font attribute word
font-family
CSS font css font-family usage method:
font-family:"设置字体名称";
exp:
CSS application example code:
.div{ font-family:"黑体";}
Corresponding html code:
<div class="div">我也是黑体字体</div>
Note: The above css font-family font case includes the original html font settings and css font settings.
Font selection skills
CSS fonts are common and we use two Chinese fonts: "Hei" and "Songti". Why is this? Because when the web page is loaded to select the font, the visitor system is called. The text font of the text library. If the font is not found, the default web font will be displayed. The operating systems installed by everyone (XP\VISTA\WIN7 and other systems) include these Chinese fonts by default. In this way, we need to use the fonts that come with everyone's operating system as web fonts, so we cannot set text fonts that we install separately. If we set a font that we installed separately, the font style will be set on our own computer, and the text fonts in this webpage will be greatly changed when other users browse this webpage.
font-family font selection
We have introduced the techniques of selecting CSS properties and values in the VIP course.
We recommend four commonly used fonts:
Arial, Helvetica, Microsoft Yahei, Arial, Helvetica, and sans-serif.
font-family summary
Use css font-family to set the font for the object text. Be careful to use commonly used fonts and do not set the fonts you installed as the fonts of the web page. , so that when others browse your webpage, there will be no such font, resulting in unsightly text. Usually recommended fonts: Heilongjiang, Songti, Microsoft Yahei, Arial, Helvetica, sans-serif.
That’s it for the font setting methods and notes. I hope everyone can master it. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use the padding attribute in css
How to know whether the browser supports html
The above is the detailed content of How to set font style in CSS. For more information, please follow other related articles on the PHP Chinese website!

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

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

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)

Hot Topics



How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

To verify dates in Bootstrap, follow these steps: Introduce the required scripts and styles; initialize the date selector component; set the data-bv-date attribute to enable verification; configure verification rules (such as date formats, error messages, etc.); integrate the Bootstrap verification framework and automatically verify date input when form is submitted.

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
