Как мне взаимодействовать с определениями @font-face с помощью отладчика Chrome?

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

  • Где я могу узнать, было ли распознано правило @font-face из моей таблицы стилей и вступает в силу?

    Например, если у меня есть правило с селектором "div.foo", то все, что мне нужно сделать, это проверить любой div на странице с классом foo, чтобы увидеть, как правило вступает в силу и жить-редактировать его значения.

  • Как добавить новое правило @font-face в интерактивном режиме?

    Всякий раз, когда я пытаюсь добавить его с помощью кнопки "New Style Rule" (с символом +), Chrome падает. Это связано с странным "@" на селекторе? Что такое "@" в любом случае?

Я использую Chrome 19, потому что мне нравится его отладчик лучше, но я бы не прочь использовать другой браузер, если бы это была единственная возможность здесь.

Ответы

Ответ 1

(1) Я не думаю, что вы можете. @font-face просто добавляет новый шрифт в набор доступных шрифтов. Учитывая элемент с font-family: Foo, инструменты dev не предоставляют никакой информации о происхождении шрифта (независимо от того, доступны ли они локально или загружаются с помощью правила @font-face). Вам придется вручную искать правила @font-face в таблицах стилей страницы и записывать имена шрифтов "внешние". (Вы можете сделать это, перейдя на вкладку "Ресурсы" инструментов dev и набрав "@font-face" в поле поиска.)

Btw, вы можете просмотреть, какие внешние файлы шрифтов доступны на веб-странице, перейдя на вкладку "Ресурсы" в инструментах dev и расширив каталог Fonts. Каждый файл в этом каталоге представляет одно правило @font-face.

(2) Вы не можете использовать метод "New Style Rule", потому что @font-face - это не правило стиля, а правило at. Чтобы добавить правило @font-face на веб-страницу, перейдите на вкладку "Ресурсы" в инструментах dev, выберите таблицу стилей (.css файл) в каталоге Stylesheets и скопируйте в нее шрифт @font- лицом в эту таблицу стилей. Теперь вы можете сразу же использовать новое имя шрифта в своих свойствах font-family.