CSS自定义字体未在网页导航栏显示问题求助

问题描述 #

我第一次在CSS里用自定义字体，但导航栏没法正常显示这个字体。我是纯新手，正在为月底的FBLA全国赛改版个人网站，问题可能有点基础，抱歉。之后可能还有不少问题，希望有经验的开发者能帮忙。我已经确认字体文件路径是对的，VS Code里能正常跳转。以下是我的CSS代码：

* {
    margin: 0;
    padding: 0;
  }
  
  @font-face {
    font-family: 'Font1';
    src: url(Fonts/Font1.ttf) format('truetype');
  }
  
  body {
    min-height: 100vh;
    background-color: #f1c65a;
    font-family: 'Font1', sans-serif; /* Include fallback font */
    display: flex;
    flex-direction: column;
  }
  
  nav {
    background-color: rgba(255, 255, 255, 0.01);
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Ensure nav stays above other elements */
    font-size: 30px;
    font-family: 'Font1', sans-serif; /* Include fallback font */
  }
  
  nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  
  nav .main-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  
  nav .main-nav li {
    margin: 0 10px;
  }
  
  nav a {
    height: 50px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #023020;
  }
  
  nav a:hover {
    background-color: #f0f0f0;
  }
  
  .logo-container {
    width: 220px; /* Set the width of the logo container */
    height: auto; /* Allow the height to adjust proportionally */
  }
  
  .logo-container img {
    max-width: 100%; /* Make sure the logo doesn't exceed the container width */
    height: auto; /* Allow the height to adjust proportionally */
    margin-top: 135px;
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    background-color: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(12px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.01);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 1; /* Ensure sidebar stays above other elements */
  }
  
  .sidebar li {
    width: 100%;
  }
  
  .sidebar a {
    width: 100%;
    padding: 15px 30px;
  }
  
  .menu-button {
    display: none;
  }
  
  .menu-button ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .menu-button li {
    margin: 0;
    padding: 0;
  }
  
  .menu-button a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #023020;
    height: 50px;
  }
  
  .menu-button a:hover {
    background-color: #f0f0f0;
  }
  
  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: calc(100% - 40px); /* Subtract the total padding from the width */
    left: 49%; /* Position the footer to the center horizontally */
    transform: translateX(-50%); /* Center the footer precisely */
    background-color: #f1c65a;
    color: #023020;
    width: 100%;
    z-index: 1;
  }
  
  .footer-item {
    text-align: center;
    font-size: 30px;
  }
  
  footer a {
    text-decoration: none;
    color: #023020;
  }
  
  footer a:hover {
    background-color: #7B3F00;
    color: #023020;
  }
  
  @media (max-width: 800px) {
    .hideOnMobile {
      display: none !important;
    }
  
    .menu-button {
      display: block;
    }
  
    nav .main-nav {
      justify-content: center; /* Align items to the right */
    }
  
    .logo-container img {
      margin-top: 50px;
      margin-left: 80px; /* Push the logo to the right */
      width: 120px; /* Set the width of the logo container */
      height: auto; /* Allow the height to adjust proportionally */
    }
  }
  
  @media (max-width: 400px) {
    .sidebar {
      width: 100%;
    }
  }

解决步骤 #

• 检查字体加载状态
  打开浏览器开发者工具（按F12），切换到「网络」标签页，刷新页面后搜索你的字体文件名（Font1.ttf）。如果状态码不是200，说明文件没加载成功：

  • 注意路径大小写：比如Linux/macOS系统区分大小写，Fonts和fonts是不同路径；
  • 确认文件权限：确保字体文件能被浏览器读取，没有设置限制。

• 完善@font-face规则
  给@font-face加上font-weight和font-style属性，确保和使用时的属性匹配，避免浏览器因为属性不匹配而自动 fallback 到备用字体。修改后的代码：

  @font-face {
    font-family: 'Font1';
    src: url(Fonts/Font1.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

• 强制刷新字体缓存
  浏览器可能缓存了旧的资源，导致新字体不加载。可以在字体URL后加版本参数，强制浏览器重新请求：

  src: url(Fonts/Font1.ttf?v=1) format('truetype');
  

• 确认导航栏元素的字体继承
  虽然你给nav设置了font-family，但要确保nav a标签没有被其他样式覆盖。可以在开发者工具里查看a标签的「计算样式」，确认font-family是'Font1', sans-serif。如果被覆盖，直接给nav a加上font-family：

  nav a {
    /* 原有属性 */
    font-family: 'Font1', sans-serif;
  }
  

• 验证字体文件本身
  直接在本地打开Font1.ttf文件，确认字体能正常显示，没有损坏。如果文件损坏，重新下载或替换字体文件。

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