Einführung in Eigenschaften im Zusammenhang mit chinesischen Zeichen und Schriftarten in CSS3

Dieser Artikel bietet Ihnen eine Einführung in die Attribute chinesischer Schriftzeichen und Schriftarten in CSS3. Ich hoffe, dass er für Freunde hilfreich ist.

1 Textschattenattribut

(1) Funktion

Füge einen Schatteneffekt zum Text hinzu Seite .

(2) So verwenden Sie

text-shadow: Länge Länge Länge Farbe (der horizontale Abstand des Schattens vom Text, der vertikale Abstand, der Unschärferadius des Schattens, die Farbe des Schattens)

Hinweis:

Der horizontale Abstand und der vertikale Abstand des Schattens vom Text : Muss angegeben werden, negative Werte ​​kann angegeben werden.

Der Unschärferadius des Schattens: stellt den Unschärfebereich dar, wenn der Schatten nach außen verschwimmt. Je größer der Radius, desto weiter verschwimmt der Schatten nach außen. Optionaler Parameter. Wenn er weggelassen wird, ist der Standardwert 0, was bedeutet, dass der Schatten nicht nach außen verschwimmt.

Schattenfarbe: Optionaler Parameter. Wenn nicht angegeben, wird die Farbe des Farbattributs in CSS2 verwendet (aktuelles Firefox und Opera, andere unterstützen das Auslassen nicht, sonst wird es nicht gezeichnet ), in CSS3 Verwenden Sie die vom Browser angegebene Standardfarbe.

(4) Geben Sie mehrere Schatten an

text-shadow：10px 10px #f39800,
                         40px 35px #fff100,
                        70px  60px #c0ff00；

Nur Chrome-, Firefox- und Opera-Browser unterstützen diese Funktion.

(3) Browser-Unterstützung

Bisher: Safari-, Chrome-, Firefox- und Opera-Browser unterstützen dieses Attribut.

Textschatten: 5px 5px 5px grau (grauer Schatten, der Schatten verlässt das Molekül um 5 Pixel in horizontaler und vertikaler Richtung)

2-Wort-Umbruch-Attribut

(1) Funktion: Text automatisch umbrechen lassen

(2) Wert: normal (Standardumbruchregeln des Browsers verwenden), Alles behalten (kann nur die Hälfte verwenden). -Breite Leerzeichen) oder Zeilenumbruch bei einem Bindestrich), alle umbrechen (Zeilenumbrüche innerhalb von Wörtern zulassen)

(3) Browser-Unterstützung

Bisher: Unterstützung für Safari-, Chrome- und IE-Browser dieses Attribut.

3 Zeilenumbruch-Attribut

(1) Funktion: Lange Wörter und URL-Adressen automatisch umbrechen lassen .

(2) Werte: normal (Browser-Standardverarbeitung), break-word (Zeilenumbrüche innerhalb langer Wörter oder URL-Adressen)

(3) Browserunterstützung: alle Browser.

4 Web-Font- und @font-face-Attribute

(1) Funktion: Serverseitige Schriftart auf der Webseite anzeigen.

(2) Verwendung:

@font-face{
    font-famliy：WebFont；
    src：url（‘font/Fontin_Sans_R_45b.otf’）  format（“opentype”）；
   font-weitht：normal；
}
h1{
    font-family：WebFont；
}

5 Font-Size-Adjust-Attribut

(1) Funktion: Ändern Sie die Schriftart. Behalten die Schriftgröße bleibt unverändert

(2) Verwendung:

Aspektwert (Proportionswert): kann verwendet werden, um die Schriftgröße grundsätzlich unverändert zu lassen, wenn die Schriftart auf andere Schriftarten geändert wird . (Konstant)

Berechnungsmethode: x-Höhenwert (die Höhe des in dieser Schriftart geschriebenen Kleinbuchstabens X (in Pixel)) geteilt durch die Größe der Schriftart.

p{
   font-size：16px；
   font-famliy：Times New Roman；
   font-size-adjust：0.46（aspect值）
}

(3) Die Berechnungsmethode des Browsers für den Aspektwert:

Nachdem der Aspektwert im Attribut „font-size-adjust“ angegeben und die Schriftart in eine andere Schriftart geändert wurde, führt der Browser eine Berechnung durch der Aspektwert nach der Änderung. Formel zur Berechnung der Schriftgröße:

c = (a / b) s

a: stellt den Aspektwert der tatsächlich verwendeten Schriftart dar, b: stellt den Aspekt dar Wert der Schriftart vor der Änderung,

s: gibt die angegebene Schriftgröße an , c: die tatsächlich vom Browser angezeigte Schriftgröße.

(4) Der Attributwert kann auf „none“

gesetzt werden, was gleichbedeutend damit ist, dass das Attribut „font-size-adjust“ nicht gesetzt wird und die Schriftart entsprechend ihrer Originalgröße angezeigt wird.

6 Verwenden Sie rem-Einheiten, um die Schriftgröße zu definieren

(1) Die rem-Schriftgrößeneinheit basiert auf dem Stammelement auf der Seite (bezieht sich im Allgemeinen auf das HTML-Element) Die tatsächliche Schriftgröße wird unabhängig von der Schriftgröße des übergeordneten Elements des Elements berechnet.

html｛font-size：62.5%｝（大多数浏览器中，默认字体大小为16个像素，使用62.5%， 使浏览器自动计算出10个像素）
small｛font-size：1.1rem；｝
strong｛font-size：1.8rem；｝

(2) Browserunterstützung:

Bisher: Alle Browser einschließlich IE9 werden unterstützt.

(3) Kompatibel mit IE8 und früheren Versionen (Rem-Schrifteinheiten können nicht verwendet werden)

html｛font-size：62.5%｝
small｛font-size：11px；font-size：1.1rem；｝
strong｛font-size：18px；font-size：1.8rem；｝

Verwandte Empfehlungen:

So verwenden Sie Selektoren, um alle Elemente einzufügen in CSS3 auf der Seite Erforderlicher Inhalt (mit Code)

Vier Funktionen, die durch das Transformationsattribut in CSS3 implementiert werden (Rotation, Skalierung, Neigung, Bewegung)

Das obige ist der detaillierte Inhalt vonEinführung in Eigenschaften im Zusammenhang mit chinesischen Zeichen und Schriftarten in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!