英文:
Custom font doesn't work in CSS - shows Times new roman instead
问题
我正在尝试将自定义字体添加到项目中，但不起作用。
这是我在.css文件中添加它的方式：
@font-face {font-family: 'Open Sans';src: url('/open-sans.eot');src: url('/open-sans.eot?#iefix') format('embedded-opentype'),url('/OpenSans-Regular.ttf') format('truetype'),url('/open-sans.woff') format('woff');font-weight: normal;font-style: normal;}
这是我如何使用它的方式：
.panel-heading {font-family: 'Open Sans';font-size: 20px;}
而不是我的字体，我得到了Times New Roman。字体位于正确的文件夹中，我甚至将它移动到与.css文件相同的文件夹中以避免任何疑虑。
我做错了什么？提前感谢。
英文:
I'm trying to add custom font to the project but it doesn't work.
That's how I added it to .css file:
@font-face {font-family: 'Open Sans';src: url('/open-sans.eot');src: url('/open-sans.eot?#iefix') format('embedded-opentype'),url('/OpenSans-Regular.ttf') format('truetype'),url('/open-sans.woff') format('woff');font-weight: normal;font-style: normal;}
That's how I'm using it
.panel-heading {font-family: 'Open Sans';font-size: 20px ;}
Instead of my font I'm getting Times New Roman. The font is in the right folder, I even moved it to the same folder with .css files to avoid any doubts.
What am I doing wrong? Thanks in advance
答案1
得分: 1
错误在于我从.css文件夹中写入了字体的路径，而我需要从/root文件夹中进行操作。
所以我将所有字体移回到root/fonts/目录下，
并修复了以下代码：
@font-face {
font-family: 'Open Sans';
src: url('/fonts/open-sans.eot');
src: url('/fonts//open-sans.eot?#iefix') format('embedded-opentype'),
url('/fonts//OpenSans-Regular.ttf') format('truetype'),
url('/fonts//open-sans.woff') format('woff');
font-weight: normal;font-style: normal;
}
英文:
The mistake was that I was writing the path to the font from the .css files folder. And I had to do it from /root folder.
So I moved all fonts back to root/fonts/
and fixed the code to
@font-face {font-family: 'Open Sans';src: url('/fonts/open-sans.eot');src: url('/fonts//open-sans.eot?#iefix') format('embedded-opentype'),url('/fonts//OpenSans-Regular.ttf') format('truetype'),url('/fonts//open-sans.woff') format('woff');font-weight: normal;font-style: normal;}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论