Fonts 下载的自定义字体不工作;我做错了什么?
这是我第一次在我正在构建的网站上使用自定义字体。我选择了这个: 我下载了它并阅读了一些简短的教程。它们都说了同样的话,将带有下载字体的文件放在css/fonts下,然后将其包含在我的样式表中:Fonts 下载的自定义字体不工作;我做错了什么?,fonts,webfonts,Fonts,Webfonts,这是我第一次在我正在构建的网站上使用自定义字体。我选择了这个: 我下载了它并阅读了一些简短的教程。它们都说了同样的话,将带有下载字体的文件放在css/fonts下,然后将其包含在我的样式表中: 但是,它不会转换leftmenu中的文本。我做错了什么?我知道我的字体调用看起来要复杂得多 /* BEGIN Light */ @font-face { font-family: 'Open Sans'; src: url("OpenSans/Light/OpenSans-Light.eot?
但是,它不会转换leftmenu中的文本。我做错了什么?我知道我的字体调用看起来要复杂得多
/* BEGIN Light */
@font-face {
font-family: 'Open Sans';
src: url("OpenSans/Light/OpenSans-Light.eot?v=1.1.0");
src: url("OpenSans/Light/OpenSans-Light.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("OpenSans/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"), url("OpenSans/Light/OpenSans-Light.woff?v=1.1.0") format("woff"), url("OpenSans/Light/OpenSans-Light.ttf?v=1.1.0") format("truetype"), url("OpenSans/Light/OpenSans-Light.svg?v=1.1.0#Light") format("svg");
font-weight: 300;
font-style: normal; }
/* END Light */
/* BEGIN Light Italic */
@font-face {
font-family: 'Open Sans';
src: url("OpenSans/LightItalic/OpenSans-LightItalic.eot?v=1.1.0");
src: url("OpenSans/LightItalic/OpenSans-LightItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("OpenSans/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("OpenSans/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff"), url("OpenSans/LightItalic/OpenSans-LightItalic.ttf?v=1.1.0") format("truetype"), url("OpenSans/LightItalic/OpenSans-LightItalic.svg?v=1.1.0#LightItalic") format("svg");
font-weight: 300;
font-style: italic; }
/* END Light Italic */
/* BEGIN Regular */
@font-face {
font-family: 'Open Sans';
src: url("OpenSans/Regular/OpenSans-Regular.eot?v=1.1.0");
src: url("OpenSans/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("OpenSans/Regular/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("OpenSans/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("OpenSans/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("OpenSans/Regular/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
font-weight: normal;
font-style: normal; }
/* END Regular */
使用所有不同文件格式的原因是允许不同的系统/浏览器使用他们“知道”的格式。例如,如果只加载ttf
格式,Apple/Safari安装可能没有问题,但运行EI的Microsoft box可能不知道该怎么办。请原谅,如果我忘记了哪些字体格式对应于我认为IE要查找的浏览器eot
。如果品牌字体加载确实很重要,那么我会将它们全部加载
我还在我的css
开头使用常规重置,包括指向新字体文件的常规指针:
*{
/* typographic resets */
font-family:'Open Sans',Arial,Helvetica,sans-serif;
font-size:14px;
line-height:1.6em;
text-decoration:none;
vertical-align:baseline;
}
通过仔细的路径指定,这应该可以解决您的问题。(测试时请记住清除缓存。)
请注意“备份”设置(Arial、Helvetica、sans serif
),这些设置指定在所需文件失败时应加载的字体
我相信上述信息被视为最佳实践。如果我错了,请纠正我