下载字体显示异常排查及Figma转HTML/CSS简便方法咨询

一、字体显示不符问题（非Chrome浏览器问题，是配置错误） #

错误分析 #

你的@font-face与Tailwind配置存在多处语法和逻辑错误，导致字体无法正确加载：

1. @font-face语法错误：
   • font-family属性值不应包含sans-serif，这是字体使用时的降级备选，不属于字体名称本身
   • font-style值错误，应为normal而非sans-serif
   • src中format('embedded-opentype')的位置错误，应嵌套在对应url()的括号内
2. 字体文件问题：
   文件名Spartan-MB-SemiBold.ttf.woff不符合常规命名规范，通常woff格式文件后缀为.woff，需检查实际文件是否重命名错误
3. Tailwind配置与HTML引用冲突：
   HTML中h1使用的font-spartan类对应Tailwind配置里的Spartan字体，和你自定义的Spartan-MB-SemiBold并非同一字体，导致优先级冲突
4. 颜色配置错误：
   Tailwind配置中title-text颜色值缺少#前缀，导致颜色无法生效

修复步骤 #

1. 修正@font-face代码：

@font-face {
    font-family: 'Spartan-MB-SemiBold';
    src: url('./assets/Spartan-MB-SemiBold.woff') format('woff'),
         url('./assets/Spartan-MB-SemiBold.eot') format('embedded-opentype'),
         url('./assets/Spartan-MB-SemiBold.svg') format('svg');
    font-weight: 600; /* 对应SemiBold的字重，不要用normal */
    font-style: normal;
}

2. 调整Tailwind配置：
   将自定义字体加入fontFamily配置，同时修复颜色缺失的#前缀：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["index.html"],
  theme: {
    extend: {
      colors: {
        'navbar-left': '#E8FFDA',
        'navbar-right': '#67FB0D',
        'title-text': '#579229', /* 补充#前缀 */
        'login-button': '#B9E198',
        'login-text': '#102400',
        'square-one': '#FFECA9',
        'square-two': '#FF9393',
        'square-three': '#93D3FF',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      },
      fontFamily: {
        'league-spartan': ['League Spartan', 'sans-serif'],
        'spartan': ['Spartan', 'sans-serif'],
        'spartan-mb': ['Spartan-MB-SemiBold', 'sans-serif'], /* 添加自定义字体 */
      },
    },
  },
  plugins: [],
}

3. 修正HTML引用：
   将h1的类改为自定义字体对应的Tailwind类：

<h1 class="flex flex-end mt-4 font-spartan-mb text-title-text">StudyConnect</h1>

4. 清除浏览器缓存：
   Chrome中按Ctrl+Shift+R强制刷新页面，避免缓存旧的错误样式

二、Figma转HTML/CSS的简便方法 #

• Figma内置Inspect功能：选中元素后，右侧「Inspect」标签可直接复制CSS代码、颜色值、字体样式，批量提取全局样式（颜色、字体）到Tailwind配置
• Tailwind官方插件：使用Tailwind CSS相关Figma插件，直接将设计样式映射为Tailwind类名，一键复制生成的HTML结构与类名
• 组件化复用：将Figma中重复元素（导航栏、按钮）做成组件，对应HTML中的复用组件，编写一次代码即可多次使用
• 半自动提取核心样式：先整理全局样式（颜色、字体、间距）到Tailwind配置，再逐个组件编写HTML，比全自动化生成的代码更简洁可控，避免冗余

内容的提问来源于stack exchange，提问作者bonk