Web Front-end
CSS Tutorial
How to customize fonts in css? Introduction to text font styles in html
How to customize fonts in css? Introduction to text font styles in html
cssHow toCustomize fonts Do you know? There is also an introduction to css style settings and font styles, such as font size and font thickness settings. This article teaches you how to use css styles to do these things. Now let’s take a look at the article
1. First of all, we introduce how to use css style to customize fonts. Let’s take a look:
Here we introduce an attribute in css style :
font-family: Defines the font family of the text. Also called font family, there are five common ones: serif, sans-serif, monospace, cursive, fantasy.
Of course, you can also find specific fonts. We can find a font on our computer and copy the name to set it. Of course, if the font is not installed on the client, it will be useless. What is displayed is the default font of the client. (If you want to see more, come to PHP Chinese websitecss video tutorial)
Let’s take a look at an example of text font:
<style>
.you_1{font-family:serif}
.you_2{font-family:sans-serif}
.you_3{font-family:monospace}
.you_4{font-family:cursive}
.you_5{font-family:fantasy}
</style>
</head>
<body>
<p class="you_1">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p class="you_2">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p class="you_3">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p class="you_4">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p class="you_5">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p>这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
</body>Here The above five paragraphs are all given different font styles. Let’s take a look at the results displayed in the browser now:
As shown in the picture, the last one is not Any setting is to set the first five fonts. Doesn’t it seem obvious? These are the five commonly used fonts in the font-family. Basically all computers have these fonts. You don’t need to worry about them being used in other people’s computers. Cannot be displayed. That’s it for our custom fonts.
2. Now let’s talk about our text font style, such as changing the size and bolding the font. Let's take a look at it together:
font-weight: used to set the text thickness, there are three types: normal, bold, parameters 100~900, define text size The
font-size: attribute is used to set the size of the text. There are px, em, and %. By default, 1em is equal to 16 pixels.
This is another introduction to two fonts in css styles. Now let’s make them appear in an instance.
Let’s take a look at the font style settings Example:
<style>
.you_1{font-weight:600}
.you_2{font-size:40px}
</style>
</head>
<body>
<p class="you_1">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p class="you_2">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p>这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
</body> You can clearly see that this code first sets the text thickness parameter, and there is also a px parameter that sets the text size. Now let's take a look at the effect displayed in the browser:
This is a bit too big. But it doesn't matter, you can definitely see it clearly. No one will say that they can't see clearly. One is for setting the thickness, and the other is for setting the size. There should be no one who can't tell which one is for setting the size and which one is for setting the thickness.
Okay, this article ends here. It introduces how to set fonts in CSS styles and how to design text font styles. If you have any questions, you can leave a message below.
【Editor’s Recommendation】
#What are the attributes of the html input tag? Summary of usage of input tag (with examples)
#How to set the height of label tag in html? Introduction to how to use label labels
The above is the detailed content of How to customize fonts in css? Introduction to text font styles in html. 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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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 bootstrap in vue
Apr 07, 2025 pm 11:33 PM
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.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
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.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
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.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
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.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
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-
