如何在 tailwindcss 中添加多自定义字体

Question

eHi，如何添加多自定义字体？我想向 tailwindcss 添加两种自定义字体，但是有一种字体可以正常工作，另一种 not.fonts 在一个文件夹中。

我有 fontiran.css 个样式表文件：

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/eot/IRANSansWeb_Black.eot');
    src: url('../fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/eot/IRANSansWeb_Bold.eot');
    src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/eot/IRANSansWeb_Medium.eot');
    src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/eot/IRANSansWeb_Light.eot');
    src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/eot/IRANSansWeb_UltraLight.eot');
    src: url('../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/eot/IRANSansWeb.eot');
    src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
}

@font-face {
    font-family: iransansdn;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/eot/iransansdnbold.eot');
    src: url('../fonts/eot/iransansdnbold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/iransansdnbold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/iransansdnbold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/iransansdnbold.ttf') format('truetype');
}

@font-face {
    font-family: iransansdn;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/eot/iransansdnlight.eot');
    src: url('../fonts/eot/iransansdnlight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/iransansdnlight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/iransansdnlight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/iransansdnlight.ttf') format('truetype');
}

@font-face {
    font-family: iransansdn;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/eot/iransansdn.eot');
    src: url('../fonts/eot/iransansdn.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/iransansdn.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/iransansdn.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/iransansdn.ttf') format('truetype');
}

和此样式表编译文件：

@tailwind base;
@tailwind components;
@import url(fontiran.css);


@tailwind utilities;

最后一步，我将字体添加到 tailwind.config.js 文件：

module.exports = {
  purge: [],
  theme: {
    fontFamily: {
      displayHead: ['iransansdn', 'sans-serif'],
      body:['IRANSans','sans-serif'],
    },
    extend: {},
  },
  variants: {},
  plugins: [],
}

现在 font-body 工作正常但是 font-displayHead 不工作，为什么？

Answer 1

生成的CSS 类是用“-”而不是驼峰式生成的，所以你应该使用

class="font-display-head"

如何在 tailwindcss 中添加多自定义字体

How can I add multi custom font in tailwindcss

css

tailwind-css