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 spatie/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 preload is set to true, preload meta tags will be generated
     * in the HTML output to instruct the browser to start fetching the
     * font files as early as possible, even before the CSS is fully parsed.
     */
    'preload' => false,
    
    /*
     * 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

与spatie/laravel-csp一起使用

如果您正在使用spatie/laravel-csp来管理您的内容安全策略，您可以将一个数组传递给blade指令，并添加nonce选项。

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

<head>
    {{-- Loads Inter --}}
    @googlefonts(['nonce' => csp_nonce()])

    {{-- Loads IBM Plex Mono --}}
    @googlefonts(['font' => 'code', 'nonce' => csp_nonce()])
</head>

对于旧浏览器的注意事项

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

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

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

测试

composer test

更新日志

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

贡献

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

安全漏洞

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

鸣谢

许可证

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

spatie / laravel-google-fonts

维护者

详情