Schriftreferenzen und Übergangseffekte außerhalb des Systems

Schriftreferenzen und Übergangseffekte außerhalb des Systems

Code kopieren
Der Code lautet wie folgt:

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;">1. Externe Schriftartreferenz: Verwenden Sie font-face, um Schriftarten einzuführen</span></span>


Manchmal müssen wir Schriftarten verwenden, die nicht im System vorhanden sind. Möglicherweise müssen wir auf die Schriftarten verweisen, die wir von außen heruntergeladen haben. Die Methode ist:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
<title>Schriftartenreferenz</title>
<meta charset="utf-8">
<style type="text/css">
<span style="white-space:pre"> </span>/*Verwenden Sie @font-face, um Schriftarten einzuführen*/
@Schriftart{
Schriftfamilie: heeh;
/*Die folgenden drei Formen sind alle möglich*/
/*src:url("Sansation_Light.ttf");*/
/*src:url('URL-Adresse des Servers.ttf');*/
src:url(Fangzheng Fat Baby vereinfacht.ttf);
}
.tb{
Schriftgröße: 80px;
Farbe: #f40;
Schriftstärke: 300;
<span style="white-space:pre"> </span><span style="white-space:pre"> </span>/*Geben Sie hier den Namen der referenzierten Schriftart an*/
Schriftfamilie: heeh;
}
</Stil>
</Kopf>
<Text>
<h1 Klasse="tb">Taobao</h1>
</body>
</html>


2. Übergangseffekt: Attribut ist Übergang

Wenn die Maus in einen bestimmten Bereich bewegt wird, tritt ein Übergangseffekt auf, bevor der Effekt erzielt wird. wie

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
<title>Übergang</title>
<meta charset="utf-8">
<style type="text/css">
.div_tran{
Breite: 130px;
Höhe: 100px;
/*a in rgba ist Transparenz (Bereich 0~1)*/
Hintergrund: rgba(165,237,15,0,5);
/*Hintergrund: rgb(165,237,15);*/
/*CSS-Transparenzeigenschaft Opazität (Bereich 0~1)*/
Deckkraft: .3;
Farbe: #000;
<span style="white-space:pre"> </span>/*Dieser Kommentar und der folgende Satz sind beide akzeptabel*/
/*-webkit-transition:Breite 2s,Höhe 3s,Hintergrund,Deckkraft 2,5s; */
-webkit-transition:alle 3s;
}
.div_tran:hover{
Breite: 200px;
Höhe: 200px;
Hintergrund: rgb(28,227,209);
Deckkraft: 1;
Farbe: rot;
}
/* Spanne{
Deckkraft: 1;
Position: relativ;
oben: -100px;
}*/
</Stil>
</Kopf>
<Text>
<div Klasse="div_tran">
Übergang
</div>
<!-- <span>Übergang</span> -->
</body>
</html>

<<:  Detaillierte Erklärung des Marquee-Attributs in HTML

>>:  Detaillierte Erklärung des JavaScript-Proxy-Objekts

Artikel empfehlen

Webentwickler sind besorgt über die Koexistenz von IE7 und IE8

Ich habe heute IE8 installiert. Als ich auf die M...

So erstellen, speichern und laden Sie Docker-Images

Es gibt drei Möglichkeiten, ein Image zu erstelle...

Hinweise zur Konfiguration mehrerer Proxys mithilfe von Vue-Projekten

Im Entwicklungsprozess eines Vue-Projekts konfigu...

Einrichten eines Proxyservers mit nginx

Nginx kann seine Reverse-Proxy-Funktion zum Imple...

So verwenden Sie CSS, um je nach Unterelementen unterschiedliche Stile zu schreiben

Der Effekt, den wir erreichen müssen: Was wird be...

Einführung in Netzwerktreiber für Linux-Geräte

Kabelgebundenes Netzwerk: Ethernet Drahtloses Net...

Mysql aktualisiert die Datenbank dynamisch - Skriptbeispiel - Erklärung

Das spezifische upgrade -Skript lautet wie folgt:...

So optimieren Sie MySQL-Indizes

1. Wie MySQL Indizes verwendet Indizes werden ver...

Installieren Sie den Quellcode der MySQL-Datenbank 5.6 unter Linux und ändern Sie das Anmeldebenutzerkennwort

In diesem Artikel wird hauptsächlich die Installa...

Spezifische Verwendung von MySQL-Operatoren (und, oder, in, nicht)

Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...

Vergleich zwischen Node.js und Deno

Inhaltsverzeichnis Vorwort Was ist Deno? Vergleic...

Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder

Da wir Bilder hochladen möchten, müssen wir zunäc...

Detaillierte Erläuterung der Leistungsoptimierung des Web-Frontends: Zusammenführung und Komprimierung von Ressourcen

Ressourcenzusammenführung und -komprimierung für ...

Beispielcode zur Implementierung einer einfachen Suchmaschine mit MySQL

Inhaltsverzeichnis Vorwort Einführung Ngram-Vollt...

Eine kurze Diskussion über den gesamten Prozess des ersten Renderings von Vue

Inhaltsverzeichnis 1. Vue-Initialisierung Vue-Ein...