我正在开发一个网站,该网站使用 Open Sans 字体作为正文,并使用 Font Squirrel 生成的 EOT、SVG、WOFF 和 TTF 字体文件和样式表。我首先将字体 CSS 包含在页面标题中。但是,当我在 IE7、IE8 甚至 IE9 中查看该网站时,在 Open Sans 启动之前,我会看到 Times Roman 中的所有内容。这在其他浏览器中不会发生。
谁能建议我可以阻止这种情况发生吗?这是我用于该字体的 Font Squirrel CSS:
@font-face {
font-family: 'OpenSansRegular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
下载自定义字体时您看到的内容并未在上面的代码中定义。它在您的其他中定义font-family
整个 CSS 代码中的说明。
在“OpenSans Regular”值后添加其他字体,以逗号分隔。从右到左:
- 右侧是您的字体系列。
serif
, sans-serif
, monospace
or cursive
(耶,Comic Sans!)。这里,OpenSansSth
is ... sans-serif
.
你的浏览器有这些家族的默认字体,Arial、Verdana 或 Linux 中的其他字体,等等。当你不为他选择时,这是用户的选择。默认系列是serif
Windows 中的默认字体是“Times New Roman”。这就是为什么您将 Times New Roman 视为 IE 中的 FOUC。
- 然后是与您的自定义字体尽可能接近的网络安全字体。这里是无衬线字体,如 Verdana 或 Arial。也许 sans-serif 和 Verdana 是同一件事,但你永远不确定(特别是对于 Linux 用户),所以将两者都添加
- 在自定义字体和网络安全字体之间,您可以添加可以在相当多的操作系统中安装但不是网络安全的字体,例如随 MS Office、Adobe Reader、OS X、Adobe Creative Suite 等安装的字体您可以在 10% 到 90% 的访问者计算机中找到它们,但不是 100%。并非每个人都安装 Creative Suite(仅网络专业人士和其他设计师)和 MS Office(我使用 LibreOffice),并且 XP、Vista 和 7 中安装了不同的字体
- 最后,最左边的值将是您为自定义字体指定的自定义名称。
OpenSansRegular
在您的网站中
Ex:
nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif;
}
带百分比的兼容性表(可能有点旧)http://www.codestyle.org/css/font-family/ http://www.codestyle.org/css/font-family/
不要使用 10 个值,3 到 6 个就足够了;)在 2012 年,@font-face 可能会导致渲染问题,具体取决于浏览器和操作系统(别名),但它得到了很好的支持,因此您可以缩短字体系列。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)