README

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

// config/adobe-fonts.php

return [
    'fonts' => [
        'default' => 'https://use.typekit.net/duhsjsd.css',
        'code' => 'https://use.typekit.net/2uhjdhd.css',
    ],
];

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

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

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

首次请求字体时，此包将抓取CSS，从Adobe的服务器获取资产，并将其存储在本地上，并将CSS内联渲染。

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

我们为什么创建这个包

Adobe Fonts托管了一个令人印象深刻的字体目录，但依赖它有其成本。通过在外部域名上托管字体，浏览器需要执行额外的DNS查找。这会减慢初始页面加载速度。此外，您还将访客引导到Adobe属性，这可能不会被注重隐私的用户所欣赏。

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

此包使Laravel用户自托管Adobe Fonts尽可能无缝。

致谢

感谢Spatie的Laravel Google Fonts包。我们需要这个包来处理Adobe Fonts，所以以Google Fonts包作为起点。

安装

您可以通过composer安装此包

composer require bluey-development/laravel-adobe-fonts

您可以选择发布配置文件

php artisan vendor:publish --provider="Bluey\AdobeFonts\AdobeFontsServiceProvider" --tag="adobe-fonts-config"

以下是配置文件的样子

return [

    /*
     * Here you can register fonts to call from the @adobefonts Blade directive.
     * The adobe-fonts:fetch command will prefetch these fonts.
     */
    'fonts' => [
        'default' => 'https://use.typekit.net/duhsjsd.css',
    ],

    /*
     * This disk will be used to store local Adobe 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 Adobe.
     * With fallback disabled, this package will throw an exception.
     */
    'fallback' => ! env('APP_DEBUG'),

    /*
     * This user agent will be used to request the stylesheet from Adobe 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',

];

使用方法

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

// config/adobe-fonts.php

return [
    'fonts' => [
        'default' => 'https://use.typekit.net/duhsjsd.css',
        'code' => 'https://use.typekit.net/2uhjdhd.css',
    ],
];

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

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

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

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

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

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

预取字体

如果您想确保字体在有人访问您的网站之前就准备好了，您可以使用此Artisan命令进行预取。

php artisan adobe-fonts:fetch

对旧浏览器的注意事项

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

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

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

测试

composer test

变更日志

请参阅CHANGELOG以获取有关最近更改的更多信息。

贡献

请参阅CONTRIBUTING以获取详细信息。

安全漏洞

请查阅我们的安全策略，了解如何报告安全漏洞。

致谢

许可协议

MIT 许可协议（MIT）。请查阅许可文件以获取更多信息。

bluey / laravel-adobe-fonts

维护者

详细信息