Question

我正在重新设计我丈夫的网站，虽然几年前我已经创建了一些基本网站，但我有点像新手，我只是想着把事情搞清楚......

我有一个字体，我通过Font Squirrel运行，我遇到了它在Firefox中显示的问题。 Safari和Chrome似乎运行良好。第一行文本在其上方添加了额外的空间。它是一个显示字体，我在我的网站的许多不同区域使用它，包括导航栏和许多图形和标题（不是h1或h2标签本身，但很多div） - 我用过的一个段落（在索引页面上的侧边栏）仅将空格放在第一行之上。这完全弄乱了我的网站布局，我找不到另一种适合设计的字体。

我已经尝试将line-height设置为1.2，我也尝试过在这个网站上找到的reset.css，但这些似乎不起作用。我已经在我正在使用的CSS手册中推荐的页面上包含CSS重置。

此外，索引页面的CSS仍然是内部的，因此如果您查看源代码，您可以看到它。（我还没有把它清理干净，所以它可能看起来有点混乱。）

测试网站的链接在这里：

http://www.californiaclassix.com/test/cc-indextest.html

这是CSS：

@font-face {
  font-family: 'KenyanCoffeeRg-Regular';
  src: url('fonts/304BD0_0_0.eot');
  src: url('fonts/304BD0_0_0.eot?#iefix') format('embedded-opentype'),
  url('fonts/304BD0_0_0.woff2') format('woff2'),
  url('fonts/304BD0_0_0.woff') format('woff'),
  url('fonts/304BD0_0_0.ttf') format('truetype');
  }

我使用过的几种风格：

.navbar { 
  font-family: KenyanCoffeeRg-Regular;
  font-size: 22px;
  width: 100%;
  height: 33px;
  background-color: rgb(25,25,25);
  color: white;
  text-align: right;
  padding-top: 3px;
  padding-right: 0px;
  }

.lgredtext {
  font-family: KenyanCoffeeRg-Regular;
  font-size: 60px;
  color: rgb(222,59,33);
  }

.lgredtext类用于单词＆＃34; SHOWROOM＆＃34;在页面右侧的第二个框中。

我不知道在这里包含html会有所帮助。同样，在实际页面上查看源可能更容易。这很冗长，但在我们上线之前，我会将CSS放在外部工作表上。

如果我没有提供足够的信息，请告诉我。正如我所说，我是一个新手，我不确定需要解决这个问题。

提前致谢。

编辑：@Mike＆＃39; Pomax＆＃39; Kamermans，那么，我的代码会是这样的吗？

 @font-face {
  font-family: 'KenyanCoffeeRg-Regular';
  src: url('fonts/304BD0_0_0.woff2') format('woff2'),
  url('fonts/304BD0_0_0.woff') format('woff'),
  ;
  }

我注意到评论部分说要添加对原始帖子的更改而不是评论。我已经很多地阅读了这个论坛，但很明显，我还不熟悉这个帖子的礼节。我愿意接受更正或建议。

Answer 1

您可以尝试仅为Firefox使用样式。它看起来像这样：

.lgredtext {
  font-family: KenyanCoffeeRg-Regular;
  font-size: 60px;
  color: rgb(222,59,33);
}

_:-moz-tree-row(hover), .lgredtext{
    font-family: KenyanCoffeeRg-Regular;
   font-size: 60px;
   color: rgb(222,59,33);
   line-height:1.2;
}

请不要问“下划线，冒号，破折号，moz，等等”是如何工作的。我不知道它的目标是什么，但它适用于FF。如果行高不起作用，您可以尝试边距，填充甚至边框（可能是透明的边框）。我不应该这样说，因为它不受欢迎，即使它是合法的代码;你可以使用负余量，但是每个人都说它有点笨拙。

Answer 2

对于我的案例"Fontie"这个问题，这是一个很好的解决方案;您需要上传字体，然后检查“优化垂直”

下的子项“简化垂直”指标

仅在Firefox中生成Font Squirrel生成字体的额外行空间问题

2 个答案: