Font references and transition effects outside the system

Font references and transition effects outside the system

Copy code
The code is as follows:

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;">1. External font reference: use font-face to introduce fonts</span></span>


Sometimes, we need to use some fonts that are not in the system. We may need to reference the fonts we downloaded from the outside. The method is:

Copy code
The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Font Reference</title>
<meta charset="utf-8">
<style type="text/css">
<span style="white-space:pre"> </span>/*Use @font-face to introduce fonts*/
@font-face{
font-family: heeh;
/*The following three forms are all possible*/
/*src:url("Sansation_Light.ttf");*/
/*src:url('简娃娃篆.ttf');*/
src:url(Fangzheng Fat Baby Simplified.ttf);
}
.tb{
font-size: 80px;
color: #f40;
font-weight: 300;
<span style="white-space:pre"> </span><span style="white-space:pre"> </span>/*Declare the name of the referenced font here*/
font-family: heeh;
}
</style>
</head>
<body>
<h1 class="tb">Taobao</h1>
</body>
</html>


2. Transition effect: attribute is transition

When the mouse moves to a certain area, a transition effect occurs before the effect is achieved. like

Copy code
The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>transiton</title>
<meta charset="utf-8">
<style type="text/css">
.div_tran{
width: 130px;
height: 100px;
/*a in rgba is transparency (range 0~1)*/
background: rgba(165,237,15,0.5);
/*background: rgb(165,237,15);*/
/*css transparency property opacity (range 0~1)*/
opacity: .3;
color: #000;
<span style="white-space:pre"> </span>/*This comment and the following sentence are both acceptable*/
/*-webkit-transition:width 2s,height 3s,background,opacity 2.5s; */
-webkit-transition:all 3s;
}
.div_tran:hover{
width: 200px;
height: 200px;
background: rgb(28,227,209);
opacity: 1;
color: red;
}
/* span{
opacity: 1;
position: relative;
top: -100px;
}*/
</style>
</head>
<body>
<div class="div_tran">
transiton
</div>
<!-- <span>transiton</span> -->
</body>
</html>

<<:  Detailed explanation of the marquee attribute in HTML

>>:  Detailed explanation of JavaScript Proxy object

Recommend

JavaScript css3 to implement simple video barrage function

This article attempts to write a demo to simulate...

Sample code for implementing water drop ripple animation button effect with CSS+JS

The code looks like this: <!DOCTYPE html> &...

Solution to React pure function component setState not refreshing the page update

Table of contents Problem description: Cause Anal...

HTML tutorial, easy to learn HTML language

1. <body background=image file name bgcolor=co...

Tutorial on installing and configuring remote login to MySQL under Ubuntu

This article shares the MySQL installation and co...

Complete steps to solve 403 forbidden in Nginx

The webpage displays 403 Forbidden Nginx (yum ins...

Detailed steps to download Tomcat and put it on Linux

If you have just come into contact with Linux, th...

A brief discussion on several ways to implement front-end JS sandbox

Table of contents Preface iframe implements sandb...

Super detailed basic JavaScript syntax rules

Table of contents 01 JavaScript (abbreviated as: ...

Docker deploys nginx and mounts folders and file operations

During this period of time, I was studying docker...

Nginx Layer 4 Load Balancing Configuration Guide

1. Introduction to Layer 4 Load Balancing What is...

Detailed steps to install xml extension in php under linux

Installing XML extension in PHP Linux 1. Enter th...

MySQL 8.0.15 installation and configuration method graphic tutorial under Windows

This article shares with you the graphic tutorial...

Bootstrap 3.0 study notes CSS related supplement

The main contents of this article are as follows:...

JavaScript data transmission between different pages (URL parameter acquisition)

On web pages, we often encounter this situation: ...