css - TailwindCss:本地字体未显示(在 Vue 3 中)
问题描述
我尝试在 CSS 中嵌入本地字体,但未显示字体。浏览器说,它是语言环境字体,编辑器完成也可以工作(文本-...),但字体看起来不同。
我跑了:npx tailwindcss build -i src/assets/styles/index.css --output src/assets/styles/tailwind.css
为了构建。
我的文件在哪里
src/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.ttf
src/assets/fonts/Inter/Inter-Bold.ttf
我如何导入文件
/*index.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'IBM Plex Sans', sans-serif;
font-style: normal;
font-weight: 400;
src: local('IBM Plex Sans'), local('IBMPlexSans'), url('../fonts/IBM_Plex_Sans/IBMPlexSans-Italic.ttf') format('ttf');
}
@font-face {
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
src: local('Inter'), local('Inter'), url('../fonts/Inter/Inter-Bold.ttf') format('ttf');
}
}
url() 后加引号或不加引号没有区别
我如何将它们连接到配置中
tailwind.config.js
module.exports = {
...
theme: {
extend: {
fontFamily: {
// https://tailwindcss.com/docs/font-family#customizing
ibmplexsans: ["'IBM Plex Sans'"],
inter: ["'Inter'"],
},
},
},
...
};
我如何在 Vue 组件中使用它们
<span class=" font-ibmplexsans italic text-blue-600">publish</span>
有和没有“斜体”都一样它适用于:
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,600;1,400;1,600&family=Inter:wght@600&display=swap");
我怎样才能用本地文件实现这一点。
解决方案
以这种方式排列文件
public/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.ttf
public/fonts/Inter/Inter-Bold.ttf
此外,沿此路径放置 index.css
public/fonts/index.css
有这样的内容
@font-face {
font-family: 'IBM Plex Sans', sans-serif;
font-style: normal;
font-weight: 400;
src: local('IBM Plex Sans'), local('IBMPlexSans'), url('./IBM_Plex_Sans/IBMPlexSans-Italic.ttf') format('ttf');
}
В public/index.html
<link rel="stylesheet" href="/fonts/index.css">
推荐阅读
- postgresql - 更改唯一索引以在 postgresq 中将其设置为可延迟
- java - 构建您的第一个应用 DisplayMessageActivity textview 错误,应用在启动时崩溃
- javascript - Jasmine Javascript 测试
- vim - 如何自定义 vim 航空公司以根据文件长度更改颜色?
- swift - 如何快速检测标签栏索引的变化?
- php - datables 与 laravel 5.6 不兼容?
- python - 使用python将文件上传到SFTP
- c - 此 C 代码中用于使用矩阵乘法查找斐波那契的函数 multiplyTwoMatrices() 有什么问题?
- jquery - AjaxForm 函数第二次不起作用
- java - 检查回文