CSS设置顶部导航栏字体为Ubuntu不生效问题求助

问题根因 #

Ubuntu字体未生效的核心原因是导入语句存在语法错误：@import和url之间缺少空格，浏览器无法识别这条导入规则，导致Ubuntu字体根本没有被加载，所有调用该字体的样式都会直接回退到默认字体。

修复方案 #

1. 首先修正字体导入语句，补全空格即可：

/* 修正后的导入语句 */
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');

2. 建议给所有自定义字体规则补充通用字体族作为 fallback，避免极端情况下字体加载失败后样式错乱，比如导航链接的字体规则可以调整为：

nav a {
  font-family: 'Ubuntu', system-ui, sans-serif;
  /* 其余原有属性保持不变即可 */
}

3. 额外可以修正代码里其他明显的语法错误，避免引发其他样式问题：

• h1的font-size属性缺少calc关键字，修正为font-size: calc(45px + 1vw);
• float: center是无效属性，如果要实现导航栏居中，可将.wrapper改为flex布局实现对齐效果。

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