CSS：IE“忽略”字体系列，正文除外

发布于 2024-12-29 01:46:22 字数 1183 浏览 2 评论 0原文

我无法让 IE 识别我正在测试的 WordPress 网站中的字体。我在网站的大部分内容中使用 Helvetica，并在某些较小的部分使用“Harabara”。为此，我将正文的字体系列设置为 Helvetica，将较小部分的字体系列设置为“Harabara”。这是@font-face:，

@font-face {
font-family: 'HarabaraBold';
src: url('/harabara-webfont.eot');
src: url('/harabara-webfont.eot?#iefix') format('eot'),
     url('/harabara-webfont.woff') format('woff'),
     url('/harabara-webfont.ttf') format('truetype'),
     url('/harabara-webfont.svg#webfontHeOfUYwt') format('svg');
     font-weight: normal;
     font-style: normal;
}

这里是正文：

body {
font-size:100%/130%;
line-height: 1;
color: black;
background: #fff;
font-family:Helvetica,Times New Roman,Verdana,Garamond;
width:100%;
}

以及使用 Harabara 的小节的示例：

#sidebar-homepage li{
list-style: none;
font-family: 'HarabaraBold';
letter-spacing: 1px;
font-size: 1.1em; 
text-align: left;
margin-top: 40px;
margin-left: 4px;
text-shadow:1px 1px 1px #3fa3b8;
}

当我在 Chrome/FF 中查看网页时，侧边栏主页列表项以 habara 字体正确显示。当我在 IE 中测试页面时，侧边栏列表项最初显示在 habara 中，但奇怪的是，一旦鼠标光标进入窗口，就会切换到 Helvetica。

我不确定 @font-face 是否有问题，但我尝试了建议

没有任何运气。

也很抱歉，但恐怕这个网站没有实时版本可以显示。

原文

I'm having trouble getting IE to recognise a font in a wordpress site I'm testing. I'm using Helvetica for most of the site, and "Harabara" for certain smaller sections. To do this I have the body's font-family set to Helvetica and the font-family of the smaller parts set to "Harabara". Here's the @font-face:

@font-face {
font-family: 'HarabaraBold';
src: url('/harabara-webfont.eot');
src: url('/harabara-webfont.eot?#iefix') format('eot'),
     url('/harabara-webfont.woff') format('woff'),
     url('/harabara-webfont.ttf') format('truetype'),
     url('/harabara-webfont.svg#webfontHeOfUYwt') format('svg');
     font-weight: normal;
     font-style: normal;
}

and here's the body:

body {
font-size:100%/130%;
line-height: 1;
color: black;
background: #fff;
font-family:Helvetica,Times New Roman,Verdana,Garamond;
width:100%;
}

and an example of a subsection that uses Harabara:

#sidebar-homepage li{
list-style: none;
font-family: 'HarabaraBold';
letter-spacing: 1px;
font-size: 1.1em; 
text-align: left;
margin-top: 40px;
margin-left: 4px;
text-shadow:1px 1px 1px #3fa3b8;
}

When I view the webpage in Chrome/FF the sidebar-homepage list items display correctly, in the harabara font. When I test the page in IE, the sidebar list items initially display in harabara but, oddly, switch to Helvetica once the mouse cursor enters the window.

I'm not sure if its a problem with the @font-face, but I've tried the suggestions here

without any luck.

Also apologies, but there's no live version of this site to show I'm afraid.

分享到QQ

分享到微博