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
MySQL Quick Data Comparison Techniques
In MySQL operation and maintenance, a R&D col...
Detailed explanation of webpack-dev-server core concepts and cases
webpack-dev-server core concepts Webpack's Co...
This article takes you into the world of js data types and data structures
Table of contents 1. What is dynamic typing? 2. D...
CSS realizes div completely centered without setting height
Require The div under the body is vertically cent...
Implementation of docker view container log command
Why should we read the log? For example, if the c...
Detailed tutorial on installing and configuring MySQL 5.7.20 under Centos7
1. Download the MySQL 5.7 installation package fr...
Briefly understand the two common methods of creating files in Linux terminal
We all know that we can use the mkdir command to ...
Summary of methods to improve mysql count
I believe many programmers are familiar with MySQ...
Detailed explanation of the idea of distributed lock in MySQL with the help of DB
Preface Whether it is a stand-alone lock or a dis...
CSS realizes the layout method of fixed left and adaptive right
1. Floating layout 1. Let the fixed width div flo...
Several CSS3 tag shorthands (recommended)
border-radius: CSS3 rounded corners Syntax: borde...
How to implement Linux automatic shutdown when the battery is low
Preface The electricity in my residence has been ...
mysql creates root users and ordinary users and modify and delete functions
Method 1: Use the SET PASSWORD command mysql -u r...
Detailed tutorial on how to install MySQL 5.7.18 in Linux (CentOS 7) using YUM
The project needs to use MySQL. Since I had alway...