目前我正在我的风格标签中这样做
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
但我下载了 Roboto 字体，并想知道如何配置 Tailwind 以在所有元素上全局使用这些文件和字体。
边注：
我正在使用 Vuejs 并按照此处有关如何为 Vue 设置 Tailwind 的指南进行操作
https://www.youtube.com/watch?v=xJcvpuELcZo https://www.youtube.com/watch?v=xJcvpuELcZo
@Juan Marcos 的答案是正确的，但略有不赞成。从 v2.1.0 开始，Tailwind 推荐在他们的文档中 https://tailwindcss.com/docs/adding-base-styles#font-face-rules使用@layer加载本地字体的指令：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: Proxima Nova;
font-weight: 400;
src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
}
@font-face {
font-family: Proxima Nova;
font-weight: 500;
src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
}
}
通过使用 @layer 指令，Tailwind 会自动将这些样式移动到与 @tailwind 基础相同的位置，以避免意外的特异性问题。
使用 @layer 指令还将指示 Tailwind 在清除基础层时考虑清除这些样式。请阅读我们有关生产优化的文档以了解更多详细信息。
See: https://tailwindcss.com/docs/functions-and-directives#layer https://tailwindcss.com/docs/functions-and-directives#layer
也可以看看：自定义默认字体 https://tailwindcss.com/docs/font-family#customizing-the-default-font
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
