tailwindcss Font Family 设置

7 min read

默认设置

Class Properties
font-sans font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”;
font-serif font-family: ui-serif, Georgia, Cambria, “Times New Roman”, Times, serif;
font-mono font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”, “Courier New”, monospace;

支持响应式

<p class="font-sans md:font-serif">
  <!-- ... -->
</p>

定制

多外字体使用数组表示: [‘Helvetica’, ‘Arial’, ‘sans-serif’],对于特殊字符需要进行转义’sans’: [‘Exo\ 2’, …],

module.exports = {
    theme: {
        extend: {
            fontFamily:{
                'impact': ['Impact'],
            }
        },
    },