Как определить, не используется ли CSS @ font-face на странице? - PullRequest
0 голосов
/ 26 мая 2019

В целях автоматического неиспользуемого удаления CSS на основе Javascript мы ищем решение, позволяющее определить, используется ли на странице блок @font-face.

Есть ли простой способ проверить, используется ли шрифт в HTML?

Метод getComputedStyle() потребует проверки каждого отдельного элемента HTML и не будет эффективным.

<style>@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}</style>
<html> ... </html>
<script>function test_if_open_sans_is_used() { return; }</script>

Ответы [ 2 ]

1 голос
/ 27 мая 2019

document.fonts.check API можно использовать для обнаружения использования шрифтов.Это зависит от строки шрифта style weight size font-family.

Для соответствия Open-Sans-Italic:

document.fonts.check('italic 14px "Open Sans"');
1 голос
/ 26 мая 2019

Нет API, который вы можете использовать или CSS-селектор для вычисляемых стилей.( Старый пример с jQuery ) Единственные варианты, которые у вас есть, - это перебирать весь DOM или просто использовать покрытие Chrome css

Если вы хотите автоматизировать вашрешение, которое вы всегда можете расширить инструменты Chrome Dev

...