如何解决拆分CSS以使用<link rel = preload>字体
我在VueJS和Laravel-Mix(Webpack)中使用Tailwindcss。
我想使用自定义的本地字体。
这就是我包含它们的方式:
@layer base {
/* ibm-plex-mono-100 - latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 100;
src: local('IBM Plex Mono Thin'),local('IBMPlexMono-Thin'),url('../fonts/ibm-plex-mono-v5-latin-100.woff2') format('woff2'),/* Super Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-100.woff') format('woff'),/* Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-100.ttf') format('truetype'),/* Safari,Android,iOS */ url('../fonts/ibm-plex-mono-v5-latin-100.svg#IBMPlexMono') format('svg'); /* Legacy iOS */
font-display: swap;
}
/* ibm-plex-mono-200 - latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 200;
src: local('IBM Plex Mono ExtraLight'),local('IBMPlexMono-ExtraLight'),url('../fonts/ibm-plex-mono-v5-latin-200.woff2') format('woff2'),/* Super Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-200.woff') format('woff'),/* Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-200.ttf') format('truetype'),iOS */ url('../fonts/ibm-plex-mono-v5-latin-200.svg#IBMPlexMono') format('svg'); /* Legacy iOS */
font-display: swap;
}
}
现在我的问题是:出于性能原因,我想使用<link rel=preload>
预加载字体。可以将生成的css文件拆分为app.css
和fonts.css
吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。