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>

</body>
</html>

<<: Detailed explanation of the marquee attribute in HTML

>>: Detailed explanation of JavaScript Proxy object

CSS fills the parent container div with img images and adapts to the container size

Font references and transition effects outside the system

CSS fills the parent container div with img images and adapts to the container size

Diving into JS inheritance

linux No space left on device 500 error caused by inode fullness

WeChat applet to obtain mobile phone number step record

How to install and uninstall IIS7 components using the WIN2008 server command line

Steps to package and deploy the Vue project to the Apache server

Quickly solve the problem that CentOS cannot access the Internet in VMware

Bootstrap 3.0 study notes CSS related supplement

Basic ideas and codes for implementing video players in browsers

A brief analysis of how to set the initial value of Linux root

Recommend

What is a MySQL tablespace?

MySQL complete collapse: detailed explanation of query filter conditions

Building a KVM virtualization platform on CentOS7 (three ways)

Detailed explanation of Angular structural directive modules and styles

JS implements user registration interface function

Vite+Electron to quickly build VUE3 desktop applications

Detailed explanation based on event bubbling, event capture and event delegation

The most convenient way to build a Zookeeper server in history (recommended)

The problem of mmx64.efi not found occurs when installing Ubuntu18 dual system on win10

Detailed tutorial on installing MySQL 8.0 from source code on CentOS 7.4

Detailed tutorial on installing Tomcat server and configuring environment variables on Win10 (picture and text)

Introduction to TypeScript interfaces

mysql 8.0.16 winx64.zip installation and configuration method graphic tutorial

How to use HTML+CSS to create TG-vision homepage

Usage and principles of provide and inject in Vue3