fonts目录字体无法使用，插入字体不生效且单词无间距问题咨询

字体无法显示修复方案 #

• 核心错误：@font-face 规则中定义的字体族名为 SourceSansPro，但 body 的 font-family 属性调用时错误写为 SourceSansPro-Regular，名称不匹配导致浏览器无法找到对应字体，自动降级为默认衬线字体。
• 优化建议：@font-face 规则补全 format 声明，提升浏览器字体解析兼容性，同时确认字体文件路径、文件名大小写与代码中声明完全一致。
  修复代码如下：

/* 修正@font-face声明，补全format */
@font-face {
  font-family: SourceSansPro;
  src: url(./fonts/SourceSansPro-Regular.ttf) format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: SourceSansPro;
  src: url(./fonts/SourceSansPro-Bold.ttf) format('truetype');
  font-weight: bold;
}
/* 修正font-family调用名称 */
body {
  margin: 0;
  font-family: 'SourceSansPro', serif;
}

字符无间距修复方案 #

语法错误修复 #

• HTML标签错误：每个菜单li中存在多余的</a>闭合标签，导致希腊语文本未被包裹在a标签内，对应样式无法生效，需删除多余闭合标签。
• CSS语法错误：.container 的width属性缺失单位px，浏览器无法识别容器宽度，导致菜单容器宽度异常，元素挤压无间距；#main-menu a 中的font size缺少连接符，正确写法为font-size。
  修复代码如下：

<!-- 修正菜单标签错误 -->
<ul id="main-menu">
  <li><a href="">Η ΟΜΟΣΠΟΝΔΙΑ</a></li>
  <li><a href="">ΑΡΚΑΔΩΝ ΕΡΓΑ</a></li>          
  <li><a href="">ΕΠΩΝΥΜΟΙ ΑΡΚΑΔΕΣ</a></li>
  <li><a href="">ΝΕΑ - ΕΝΗΜΕΡΩΣΗ</a></li>
  <li><a href="">ΕΠΙΣΚΕΨΗ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
  <li><a href="">ΑΝΑΖΗΤΗΣΕΙΣ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
</ul>

/* 补全width单位 */
.container{
  width: 1360px;
  margin: 0 auto;
}
/* 修正font-size语法错误 */
#main-menu a {
  color:#002868;
  font-size: 14px;
  font-weight: bold;
  /* 若仍需调整字符间距可新增letter-spacing属性，数值按需调整 */
  /* letter-spacing: 0.5px; */
}

字符集适配检查 #

需确认使用的SourceSansPro字体包含希腊语字符集，若字体本身不支持希腊语，也会出现字符挤压、显示异常的问题。

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