1

我最近开始学习 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;
}
4

2 回答 2

4

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

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

顺便说一句，在声明字体时，您还可以声明与该粗细相关的字体粗细。font-weight:100 可能是您的常规字体，而 font-weight:600 可能是您的中等字体。这使得使用字体更容易，因为您只需要记住一个名称，并简单地应用适当的重量，无论您在哪里使用您的字体。

于 2012-10-04T02:52:41.457 回答
0

嗨，您也需要以其他格式提供它才能在每个浏览器中工作。

您可以尝试在线转换器。

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;}
于 2012-10-04T02:56:59.870 回答