Question

我最近开始学习HTML / CSS，并开始对字体和跨浏览器兼容性感到非常沮丧。我在我的个人网站上使用自定义字体（Klavika）并将其上传到服务器，但我无法弄清楚如何使它与浏览器兼容。该网站位于：http://www.tommaxwell.me，您可能会看到，它显示的字体非常难看。有人可以看看我的代码并让我朝着正确的方向前进吗？

CSS：

body {
background-image: url(209241_2453996366505_1946848896_o.jpg);
background-size:cover;
}

@font-face {
font-family: klavika-medium;
src: url(Klavika-Medium.otf);
}


h1 {
text-align: center;
margin-top: 10%;
font-family: klavika-medium;
color:#FFFFFF;
font-size: 6.250em;
}


p {
position: relative;
top:-8%;
text-align: center;
font-family: klavika-regular;
color:#FFFFFF;
font-size: 1.875em;

}

ul {
position: relative;
text-align: center;
list-style-type: none;
margin-top: 5%;
left:36.5%;
font-family: klavika-medium;
}


ul li {
font-size: 40px;
}


ul li a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.8;
float:left;
padding-right:3%;

}


ul li a:hover {
opacity: 1.0;
}

Answer 1

对于不同的浏览器，您需要不同格式的字体。您可以尝试http://www.fontsquirrel.com/fontface/generator

在该网站中，他们将为您转换所有正确格式的字体。他们还会为您提供样式表示例，以便您可以复制已准备好使用跨浏览器的CSS。另一个额外的好处是可以压缩图像和音频字体。他们的工具也可以这样做，以给你一个较小的字体。

顺便说一句，在声明字体时，您还可以声明与该权重相关联的字体粗细。 font-weight：100可能是你的常规字体，font-weight：600可能是你的中等字体。这样可以更容易地使用字体，因为您只需要记住一个名称，只需使用适当的重量，无论您使用的是什么字体。

Answer 2

您好，您还需要以其他格式提供，以便在每个浏览器中都能正常工作。

您可以尝试在线转换器。

http://www.fontsquirrel.com/fontface/generator

http://www.font2web.com/

例如：

    @font-face {
font-family: 'Conv_iskpota';
src: url('fonts/iskpota.eot');
src: local('☺'), url('fonts/iskpota.woff') format('woff'), url('fonts/iskpota.ttf') format('truetype'), url('fonts/iskpota.svg') format('svg');
font-weight: normal;
font-style: normal;}

CSS中的字体/跨浏览器兼容性？

2 个答案: