README

此包使 Laravel 用户将 Google Fonts 的自托管变得尽可能的无缝。要在您的应用程序中加载字体，请注册 Google Fonts 嵌入 URL，并使用 @googlefonts Blade 指令加载。

// config/google-fonts.php

return [
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap',
        'code' => 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap',
    ],
];

{{-- resources/views/layouts/app.blade.php --}}

<head>
    {{-- Loads Inter --}}
    @googlefonts

    {{-- Loads IBM Plex Mono --}}
    @googlefonts('code')
</head>

当字体首次被请求时，此包将抓取 CSS，从 Google 服务器获取资产，将其存储在本地，并将 CSS 内联。

如果在此过程中出现任何问题，则包将回退到 <link> 标签以从 Google 加载字体。

我们创建此包的原因

Google Fonts 提供了一个令人印象深刻的字体目录，但依赖它有其代价。通过在外部域托管字体，浏览器需要执行额外的 DNS 查询。这会减慢初始页面加载速度。此外，您还将您的访客引导到 Google 属性，这可能不会受到注重隐私的用户的欢迎。

您可以从 Google Fonts 下载字体并将其自托管，但这比嵌入代码要复杂得多。跟踪最新字体版本也可能是一项繁琐的工作。

此包使 Laravel 用户将 Google Fonts 的自托管变得尽可能的无缝。

支持我们

我们投入了大量资源来创建一流的开放源代码包。您可以通过购买我们的付费产品之一来支持我们。

我们非常感谢您从您的家乡寄来明信片，说明您正在使用我们的哪个包。您可以在我们的联系页面上找到我们的地址。我们将公布所有收到的明信片在我们的虚拟明信片墙上。

安装

您可以通过 composer 安装此包

composer require nguyenhiep/laravel-google-fonts

您可以选择发布配置文件

php artisan vendor:publish --provider="Spatie\GoogleFonts\GoogleFontsServiceProvider" --tag="google-fonts-config"

以下是配置文件的样子

return [

    /*
     * Here you can register fonts to call from the @googlefonts Blade directive.
     * The google-fonts:fetch command will prefetch these fonts.
     */
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700',
    ],

    /*
     * This disk will be used to store local Google Fonts. The public disk
     * is the default because it can be served over HTTP with storage:link.
     */
    'disk' => 'public',

    /*
     * Prepend all files that are written to the selected disk with this path.
     * This allows separating the fonts from other data in the public disk.
     */
    'path' => 'fonts',

    /*
     * By default, CSS will be inlined to reduce the amount of round trips
     * browsers need to make in order to load the requested font files.
     */
    'inline' => true,

    /*
     * When something goes wrong fonts are loaded directly from Google.
     * With fallback disabled, this package will throw an exception.
     */
    'fallback' => ! env('APP_DEBUG'),

    /*
     * This user agent will be used to request the stylesheet from Google Fonts.
     * This is the Safari 14 user agent that only targets modern browsers. If
     * you want to target older browsers, use different user agent string.
     */
    'user_agent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15',

];

使用方法

要将字体添加到您的应用程序中，请从 Google 字体获取嵌入代码，在配置中注册它，并使用 @googlefonts Blade 指令。

// config/google-fonts.php

return [
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap',
        'code' => 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap',
    ],
];

{{-- resources/views/layouts/app.blade.php --}}

<head>
    {{-- Loads Inter --}}
    @googlefonts

    {{-- Loads IBM Plex Mono --}}
    @googlefonts('code')
</head>

这将内联 CSS，因此浏览器需要少做一次往返。如果您更喜欢外部 CSS 文件，您可以在包配置中禁用 inline 选项。

字体存储在 public 磁盘上的 fonts 文件夹中。您需要运行 php artisan storage:link 来确保文件可以通过 HTTP 服务器提供服务。如果您希望将字体存储在 Git 仓库中，请确保 storage/app/public 没有被忽略。

如果您想从 CDN 提供字体，您可以设置不同的磁盘配置。

预取字体

如果您想确保在任何人访问您的网站之前字体都已准备好，您可以使用此 artisan 命令预取它们。

php artisan google-fonts:fetch

对旧版浏览器的注意事项

Google Fonts 服务器会嗅探访客的用户代理头部以确定要提供哪种字体格式。这意味着字体在所有现代和旧版浏览器中都可以正常工作。

此包无法针对不同的用户代理进行定制。默认配置下，仅支持可以处理 WOFF 2.0 字体文件的浏览器。在撰写本文时，根据 caniuse，这占所有用户的 >95%。最值得注意的是，IE 不支持 WOFF 2.0。

如果您需要向旧版浏览器提供字体，您可以在配置中指定不同的用户代理字符串。请注意，这会使所有访客的页面加载变慢，包括现代浏览器。

测试

composer test

更新日志

有关最近更改的更多信息，请参阅更新日志。

贡献

有关详细信息，请参阅贡献指南。

安全漏洞

有关如何报告安全漏洞，请参阅我们的安全策略。

致谢

许可

MIT 许可证（MIT）。有关更多信息，请参阅许可文件。

nguyenhiep / laravel-google-fonts

维护者

详细信息