README

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

这实际上并不符合Typekit政策，但他们的速度如此之慢，因此这是必需的。

// config/adobe.typekit.php

return [
    'fonts' => [
        'default' => 'https://use.typekit.net/[project-id].css',
    ],
];

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

<head>
    {{-- Loads default --}}
    @typekit

    {{-- Loads code project --}}
    @typekit('code')
</head>

当字体第一次被请求时，此包将抓取CSS，从Adobe的服务器获取资源，将其存储在本地，并将CSS内联。

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

安装

您可以通过composer安装此包

composer require weble/laravel-adobe-typekit

您可以选择发布配置文件

php artisan vendor:publish --provider="Weble\AdobeTypekit\AdobeTypekitServiceProvider" --tag="adobe-typekit-config"

以下是如何查看配置文件的示例

return [

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

    /*
     * This disk will be used to store local Adobe Typekit 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 Tyepkit.
     * 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 Typekit字体获取嵌入代码，将其注册到配置中，并使用@typekit Blade指令。

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

<head>
    {{-- Loads Default --}}
    @typekit

    {{-- Loads code project --}}
    @typekit('code')
</head>

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

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

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

预取字体

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

php artisan typekit:fetch

针对旧版浏览器的注意事项

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

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

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

测试

composer test

变更日志

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

贡献

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

安全漏洞

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

鸣谢

许可协议

MIT许可证（MIT）。请参阅许可文件获取更多信息。

weble / laravel-adobe-typekit

维护者

详情