Introducing multiple custom fonts in CSS3
|
Today I found a problem in HTML. There are many default fonts provided to us, but except for those "Bold", "Song", "Kai" and other fonts that support Chinese, the rest do not know Chinese fonts. What if we need to use our favorite fonts? Is it possible to introduce custom downloaded fonts in CSS3? If possible, how should we introduce it? With this series of problems, let's look at the solution. Nothing is better than seeing the effect. Here are the effects of three fonts on the web page: "Spring Festival Couplets Standard Font", "Jiangnan Artistic Font" and "Mao Zhedong Artistic Font": Google Chrome:
Firefox:
The above is a demonstration of the effect, just for your reference! First, we need to import a font. We should have such a font (users do not need it). Download the font and put it in the font folder of the project.
You can download the fonts online or here. After the download is complete, we will introduce the fonts. HTML code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Font file test</title> </head> <body> <div class="chunlian">Spring Festival couplets standard font test</div> <div class="jiangnan">Jiangnan Artistic Font Test</div> <div class="maozedong"> Mao Zedong font test</div> </body> </html> Then the CSS style settings:
<style type="text/css">
@font-face {
font-family:'chunlian';
src: url(font/chunlian.ttf);
}
@font-face {
font-family: 'jiangnan';
src:url(font/jiangnan.ttf);
}
.chunlian{
font-family: 'chunlian';
font-size: 50px;
text-shadow: none;
}
.jiangnan{
font-family: 'jiangnan';
font-size: 40px;
}
@font-face {
font-family: 'maozedong';
src:url(font/maozedong.ttf);
}
.maozedong{
font-family: 'maozedong';
font-size: 50px;
text-shadow: none;
}
</style>If you want to add other fonts, just write @font-face in CSS! This is the end of this article about introducing multiple custom fonts in CSS3. For more information about introducing custom fonts in CSS3, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Nginx configuration file detailed explanation and optimization suggestions guide
>>: Vue2.0 implements adaptive resolution
Recommend
Example of using JS to determine whether an element is an array
Here are the types of data that can be verified l...
MySQL installation and configuration method graphic tutorial (CentOS7)
1. System environment [root@localhost home]# cat ...
The difference between Display, Visibility, Opacity, rgba and z-index: -1 in CSS
We often need to control the hidden, transparent ...
mysql8.0.11 winx64 manual installation and configuration tutorial
First of all, let me talk to you about my daily l...
Summary of the benefits of deploying MySQL delayed slaves
Preface The master-slave replication relationship...
Vue.js implements calendar function
This article example shares the specific code of ...
5 super useful open source Docker tools highly recommended
Introduction The Docker community has created man...
The impact of limit on query performance in MySQL
I. Introduction First, let me explain the version...
MySQL variable principles and application examples
In the MySQL documentation, MySQL variables can b...
Several methods of implementing two fixed columns and one adaptive column in CSS
This article introduces several methods of implem...
Detailed explanation of the application and difference between filter attribute and backdrop-filter in CSS
There are some differences between filter and bac...
A nice html printing code supports page turning
ylbtech_html_print HTML print code, support page t...
CSS3 uses scale() and rotate() to achieve zooming and rotation
1. scale() method Zoom refers to "reducing&q...
How to build a private Docker repository using Harbor
Table of contents 1. Open source warehouse manage...
JavaScript web page entry-level development detailed explanation
Part 3: ❤Three ways to overlook backend data rece...