Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erhalte ich den tatsächlichen Schriftartnamen, der von einem DOM-Element in JavaScript verwendet wird?

Linda Hamilton
Freigeben: 2024-10-24 06:31:30
Original
492 Leute haben es durchsucht

How to Get the Actual Font Name Used by a DOM Element in JavaScript?

Abrufen der berechneten Schriftartenfamilie in JavaScript

In dieser Fortsetzung einer früheren Frage möchten wir eine Lösung zum Abrufen bereitstellen der tatsächliche Schriftartname eines DOM-Elements mit JavaScript.

Die generische Funktion „berechneter Stil“ gibt die vollständige Schriftartzeichenfolge zurück, die für ein Element definiert ist, einschließlich Fallbacks. Um dies jedoch mit Dropdown-Schriftfamilieneinträgen abzugleichen, benötigen wir einen festen Schriftnamen für die tatsächlich verwendete Schriftart.

Lösung:

Um die berechnete Schriftfamilie abzurufen Erwägen Sie den folgenden Ansatz:

<code class="javascript">let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let computedFontFamily = compStyles.getPropertyValue('font-family') // e.g. "Times New Roman"</code>
Nach dem Login kopieren

Hinweise:

  • Diese Methode gibt nur die für das Element angegebene primäre Schriftfamilie zurück.
  • Einige Browser (z. B. Chrome und Firefox) unterstützen die Eigenschaft „Schriftfamilie“, wie im CSS Font Interface Module Level 3 definiert. Diese Schnittstelle bietet eine detailliertere Kontrolle über die berechnete Schriftfamilie.

Quelle:

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Das obige ist der detaillierte Inhalt vonWie erhalte ich den tatsächlichen Schriftartnamen, der von einem DOM-Element in JavaScript verwendet wird?. 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!