google font splitter

Google-Font-Splitter

Инструмент для загрузки онлайн-файлов шрифтов, предоставленных Google-Font на ваш локальный сайт.

Онлайн-шрифты, предоставленные Google-Font, используют unicode-range для сегментации пакетов шрифтов, которая может эффективно улучшить скорость загрузки шрифтов.

Тем не менее, из -за сети, среды и других проблем, некоторые проекты не могут ссылаться на шрифты Google обычно, поэтому этот инструмент будет загружать указанный Google Online на локально, чтобы облегчить проект для непосредственной ссылки локально.

Установить

Требования: node 12+

npm install -g google-font-splitter

Как использовать

Использование этого инструмента разделена на два шага, получая онлайн -ссылки шрифта и загрузка файлов шрифтов.

Шаг 1: Получите онлайн ссылки на шрифт

Откройте шрифты Google и поиск, чтобы выбрать шрифт, который вы хотите скачать.

Прокрутите вниз на странице сведений за шрифт, чтобы найти стили, и нажмите кнопку «Выбрать этот стиль» справа от шрифта, который вы хотите использовать.

Найдите ссылку на онлайн -шрифт под выбранной семейной панелью справа и скопируйте ее (просто ссылка, не нужно скопировать весь тег ссылки строки):

Шаг 2: Загрузите файл шрифта

Найдите пустую папку и выполните следующую команду:

google-font-splitter " https://你复制出的在线字体链接"
# 例如 google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap"

После ввода инструмент будет распечатать следующий вывод:

 downloading entry css file...
recast entry file and generating font download tasks...
save entry css file...
downloading font source ======================================== 100% 291/291
download complate, save to D:projectgoogle-font-splitterfont-resultnoto-sans-sc

Затем вы можете найти загруженную папку шрифта в папке в последней строке журнала, каталог заключается в следующем:

 noto-sans-sc
├── s/notosanssc/xxx/...
└── noto-sans-sc.css

Содержит папку, в которой хранятся разделенные файлы шрифтов и файл CSS с тем же именем, что и каталог. Этот файл CSS является файлом входа. Просто скопируйте папку в свой проект и ссылайтесь на нее, используя тег <Link />.

Параметры командной строки и элементы конфигурации

Вы можете использовать параметр --help для просмотра справочной информации в любое время.

• Параметр url

  Инструмент принимает только один параметр, то есть ссылка на онлайн -шрифт Google шрифтов, убедитесь, что ссылка указывает на файл CSS.

• Элемент конфигурации -r, --root <path>

  Файл CSS в записи шрифта вводит префикс пути исходного файла шрифта, который по умолчанию по умолчанию относительно относительного пути того же уровня ( поэтому по умолчанию вам необходимо разместить ввод CSS и исходные файлы Font в каталоге того же уровня ).

  Вы можете использовать этот параметр для указания местоположения хранилища исходного файла шрифта. Например, храните шрифты в отдельной сети CDN:

   google-font-splitter "https://fonts.googleapis.com/..." -r https://your-custom-cdn/public/fonts/
  

• Элемент конфигурации -d, --dist <savePath>

  Расположение по умолчанию, в котором должен быть загружен файл шрифта ./font-result

• Элемент конфигурации -n, --name <fileName>

  Имя файла записи шрифта, то есть имени папки в каталоге загрузки и имя файла ввода CSS внутри.

  По умолчанию он будет проанализирован по приведенной ссылке Google Fonts, а текущая миллисекундная метка времени будет использоваться при сбое разрешения.

• Элемент конфигурации -c, --concurrent <number>

  Количество параллелизма при загрузке исходных файлов разделенного шрифта, по умолчанию до 30.

Цитирование в проекте

Способ использования очень прост, вам просто нужно использовать <link href="xxx.css" rel="stylesheet"> для представления загруженного файла записи шрифта.

Вот несколько общих структурных ссылок (при условии, что загруженные файлы шрифтов хранятся в папке Noto-Sans-Sc, а файл входа noto-sans-sc/noto-sans-sc.css ):

vue2 (vue-cli)

Скопируйте загруженную папку Font в /public проекта VUE2.

Обратитесь к файлу записи шрифта в /public/index.html :

 < link href =" <%= BASE_URL %>noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Затем установите семейство шрифта там, где вам это нужно:

 # app {
  font-family : 'Noto Sans SC' , sans-serif;
}

VUE3 (VITE)

Скопируйте загруженную папку шрифта в /public проекта Vite.

Обратитесь к файлу записи шрифта в /index.html :

 <!-- 注意 vite 项目直接从根目录引用 public 中的文件即可 -->
< link href =" /noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Наконец, установите семью шрифтов, где это необходимо.

React (Create-React-App)

Сначала скопируйте загруженную папку Font в /public проекта React.

Затем обратитесь к файлу записи шрифта в /public/index.html :

 < link href =" %PUBLIC_URL%/noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Наконец, установите семью шрифтов, где это необходимо.

лицензия

Смотрите лицензию Google-Fonts для получения подробной информации.

обратиться к

В этом инструменте используется следующая разработка зависимостей: FS-Extra COLLEN NODE-CSS-TREE.