Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erhalte ich den wahren Namen der Schriftfamilie in JavaScript?

Mary-Kate Olsen
Freigeben: 2024-10-24 06:27:30
Original
667 Leute haben es durchsucht

How to Get the True Font Family Name in JavaScript?

Den wahren Schriftfamilienwert in JavaScript ermitteln

In einer früheren Frage wurde besprochen, wie man die Schriftgröße über JavaScript erhält. Jetzt untersuchen wir, wie man den tatsächlichen Schriftfamiliennamen aus dem berechneten Stil eines DOM-Elements ermittelt.

Standardmäßig gibt die berechnete Stilfunktion nur die gesamte Schriftdefinition zurück, einschließlich des gesamten Schriftfamilienstapels. Für die Auswahl von Schriftarten in einem Dropdown-Menü benötigen wir jedoch den genauen Namen der verwendeten Schriftart.

Lösung

Um den wahren Namen der Schriftartfamilie zu extrahieren, Verwenden Sie den folgenden Code:

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let computedFontFamily = compStyles.getPropertyValue('font-family');
Nach dem Login kopieren

Dadurch wird eine Zeichenfolge wie „Times New Roman“ zurückgegeben, die mit den Optionen im Dropdown-Menü Ihrer Schriftfamilie abgeglichen werden kann.

Browser-Unterstützung

Der obige Code wird in allen gängigen Browsern unterstützt und bietet eine konsistente Möglichkeit, den berechneten Schriftfamilienwert zu erhalten.

Das obige ist der detaillierte Inhalt vonWie erhalte ich den wahren Namen der Schriftfamilie in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!