Вопрос или проблема
Я хотел бы использовать шрифт, который я установил в VScode (фактически, это браузер Electron).
Обычно, не составляет большого труда определить, что ввести в поле font-family, чтобы шрифт отобразился в интерфейсе, но у меня есть один файл шрифта, который я просто не могу отобразить.
Например, этот шрифт установлен в настройках Windows:
Однако, при добавлении его в настройки VScode, он, похоже, не работает (редактор переходит к следующей настройке, Arial):
Это не первый раз, когда я сталкиваюсь с примерно этой проблемой; и было бы действительно здорово создать список правильных названий шрифтов, как правильно отформатированных для использования в CSS.
Существует ли интерфейс командной строки или команда, которая перечисляет установленные шрифты, с важным дополнением: с указанием OpenType свойства, которое определяет что вы вводите в поле font-family CSS, чтобы обратиться к нему?
Ответ или решение
Вопрос о том, как получить список корректных имен шрифтов для использования в CSS на Windows машине, требует внимательного рассмотрения. Проблема, с которой вы столкнулись, связана с тем, что определенные установленные шрифты не отображаются правильно в таком приложении как Visual Studio Code, который работает на базе Electron. Рассмотрим, как вы можете решить эту проблему и получить полный список шрифтов, которые могут быть корректно использованы в вашем проекте.
Теория
Когда вы устанавливаете шрифт в операционной системе Windows, он регистрируется в системных настройках и становится доступным для различных приложений, в том числе и для веб-браузеров. Но для корректного использования шрифта в CSS, необходимо знать его правильное имя, которое программное обеспечение использует для идентификации шрифта. Это имя может отличаться от того, которое вы видите в системных настройках шрифтов или в проводнике Windows. Каждому установленному шрифту могут быть назначены различные стили и веса (например, "Light", "Regular", "Bold" и т.д.), и для каждой из этих вариаций требуется уникальное указание в CSS.
Пример
Допустим, у вас установлен шрифт "Iosevka NF", но он не отображается в VScode, несмотря на то, что записан в конфигурации. В этом случае, вам нужно уточнить, как именно этот шрифт регистрируется в системе. Вы можете попробовать открыть список шрифтов через Панель управления или использовать текстовый редактор, который поддерживает выбор шрифтов, чтобы проверить доступные там именования. Однако, такой подход может не дать нужных результатов, если шрифт имеет нестандартные свойства или технически сложное имя.
Применение
Наиболее эффективный способ решить вашу задачу — воспользоваться командной строкой и специализированными утилитами. В Windows можно использовать несколько методов для получения списка всех установленных шрифтов с корректными именами:
-
Панель управления и Программа шрифтов:
- Откройте "Панель управления".
- Перейдите в раздел "Оформление и персонализация" и выберите "Шрифты".
- Здесь отобразятся все установленные шрифты. Нажав на конкретный шрифт, вы увидите доступные стили и варианты имен.
-
Скрипты PowerShell:
- Вы можете воспользоваться PowerShell для получения списка установленных шрифтов. Например, такая команда вернет нужную информацию:
[System.Drawing.Text.InstalledFontCollection]::new().Families | ForEach-Object { $_.Name }Этот скрипт выведет список всех установленных шрифтов с их системными именами. Такие имена и нужно использовать в CSS.
-
Специализированные утилиты или программы:
- Существуют сторонние приложения, как например FontBase или NexusFont, которые могут показывать полную информацию о шрифтах и их именах, которые можно использовать в CSS.
-
Вывод подключенных шрифтов в браузере:
- В некоторых случаях можно непосредственно в браузере для веб-разработки посмотреть, какие шрифты подключены и каково их правильное CSS-имя, используя инструменты разработчика. Протестируйте ваш сайт, откройте консоль и протестируйте отображение различных шрифтов.
После того, как у вас будет список шрифтов, проверьте, чтобы в вашем коде CSS имя шрифта строго совпадало с одним из имен, полученных из описанных методов. Убедитесь, что в font-family в CSS указано правильное имя, учитывая регистр символов и пробелы.
Заключение
Учитывая вашу проблему с VScode и Visual Studio на Electron, важно учитывать уникальные особенности регистрации шрифтов в Windows. Обеспечивая корректное определение имен шрифтов через систему или PowerShell, вы сможете избежать проблем с отображением. Следуя этим шагам, вы значительно упростите свою работу с шрифтами в любых проектах на CSS и других языках разметки.