log1x/laravel-webfonts

在您的Laravel项目中本地下载、安装和预加载超过1500个Google字体

资助包维护!
Log1x

安装次数: 8,894

依赖者: 0

建议者: 0

安全: 0

星标: 112

关注者: 2

分支: 6

开放问题: 0

类型:

v1.0.1 2024-03-28 11:53 UTC

This package is auto-updated.

Last update: 2024-08-28 12:55:51 UTC


README

Latest Stable Version Total Downloads Build Status

Laravel Webfonts 允许您轻松地在Laravel项目中下载、安装和预加载超过1500个Google字体。

Demo

功能

  • 🔍️ 通过公共 google-webfonts-helper API 搜索并安装1500多个Google字体。
  • ⚡️ 使用CLI安装字体时,自动生成 @font-face CSS at-rules
  • 🧑‍💻 支持开箱即用的 ViteBud,无需配置。
  • ⚡️ 提供了一个易于使用的 @preloadFonts Blade指令来预加载在Vite/Bud清单中找到的字体。
  • 🚀 在运行 Acorn 的WordPress网站上自动将字体预加载标记注入到 wp_head 中。

要求

安装

通过Composer安装

$ composer require log1x/laravel-webfonts

用法

如果您已经在项目中本地安装了字体,请跳转到 预加载字体

添加字体

Laravel Webfonts 提供了一种非常简单的方法,通过命令行将新网络字体安装到项目中

artisan webfonts:add

默认情况下,安装字体将触发以下操作

  • 将字体存档下载到本地存储中的临时目录。
  • 提取字体存档。
  • 将下载的字体移动到 resources/fonts
  • 清理临时目录。
  • 生成并将 @font-face at-rules 预先添加到 fonts 样式表。

字体样式表将位于 resources/ 目录中的样式表目录的根目录。如果字体样式表尚未存在,它将使用在您的样式中最常见的样式表扩展名(css,scss,...)创建。

默认情况下,自动扫描 resources/cssresources/styles 目录以查找现有文件,以确定写入字体样式表的位置。

生成的 @font-face at-rules 将如下所示

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2');
}

添加额外的字体将使它们被添加到现有的 fonts 样式表之前。

导入字体

当字体第一次安装时,在项目的样式表文件夹中创建一个 fonts 样式表。在纯Laravel项目中,这通常是 resources/css/fonts.css

您必须将生成的 fonts 文件导入到项目的主体样式表中(例如 app.css)。如果您使用Tailwind,它可能看起来像这样

@import 'fonts';

@tailwind base;
@tailwind components;
@tailwind utilities;

预加载字体

注意

如果您同时使用WordPress和 Acorn,则可以忽略本节,因为如果检测到包含有效字体的资产清单,预加载将自动在 wp_head 内部为您处理。

Laravel Webfonts 在生产中的主要功能是提供一种简单的方法来预加载您本地托管的网络字体。

这是通过从Vite或Bud清单中读取编译的 woff2 字体,并为您生成适当的标记来放置在 <head> 中来完成的。

在大多数情况下,您可以使用 @preloadFonts Blade指令来处理构建和输出字体预加载HTML标记。

除了Blade指令,您也可以通过Webfonts外观直接访问PreloadFonts类。

use Log1x\LaravelWebfonts\Facades\Webfonts;

// Retrieve an array of compiled font paths.
$fonts = Webfonts::fonts();

// Build the font preload HTML markup.
$html = Webfonts::preload()->build();

错误报告

如果您在Laravel Webfonts中发现了一个错误,请打开一个问题

贡献

无论是通过PR、报告问题还是提出建议,都鼓励并感谢您的贡献。

许可证

Laravel Webfonts在MIT许可证下提供。