使用 @font-face 和 fontsquirrel 中的字体答案

【问题标题】：Using @font-face and fonts from fontsquirrel使用 @font-face 和 fontsquirrel 中的字体
【发布时间】：2016-02-27 20:34:55
【问题描述】：

我正在尝试创建我的第一个网站，并且正在尝试使用 fontsquirrel 中的字体。

唯一的问题是我只能使用通过网站下载的部分字体。

当字体系列包含多种样式时，我遇到了很多问题，尤其是在正确编写 css 代码时。

让我们以 LM Mono 10 Regular 和 Special Elite 为例：

我的特殊精英代码如下，效果很好：

@font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'),
     url('specialelite.woff2') format('woff2'),
     url('specialelite.woff') format('woff'),
     url(' specialelite.ttf') format('truetype'),
     url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;                }

AND

.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}

但是..当我试图在 LM Mono 10 系列的任何风格上调整这种格式时，它根本不起作用....

http://www.fontsquirrel.com/fonts/Latin-Modern-Mono

我现在尝试了两天零几个小时，我正处于紧张危机的边缘......我不知道错误是我指的是字体系列，还是我写的网址错误...拜托，我真的求求你，你能在回复中提供一个代码示例吗？

假设“Latin Modern Mono Light 10 Regular”..

我只是不明白..

提前谢谢你，

亚历山德罗斯。

【问题讨论】：

您发布的代码是有效的，但是我想知道您是否实际上已将字体文件复制到与 CSS 相同的位置，否则它将看不到它
是的，这些文件都在同一个位置。我仍在努力寻找一种方法来让 LMMono 出现...我就是无法得到它。
我正在尝试@font-face { font-family: 'LMMono10LightRegular'; src: url('LMMono10LightRegular.otf'); src: url('LMMono10LightRegular.eot?#iefix') 格式('embedded-opentype'), url('LMMono10LightRegular.woff2') 格式('woff2'), url('LMMono10LightRegular.woff') 格式('woff' ), url('LMMono10LightRegular.ttf') 格式('truetype'), url('LMMono10LightRegular.svg#LMMono10LightRegular') 格式('svg');字体粗细：常规；字体样式：浅色； }
嗯，我给你找个例子
将此添加到您使用的文档的 css 中告诉我是否发生任何事情 body{ font-family: 'LMMono10LightRegular'; }

标签： css font-face font-family

【解决方案1】：

我刚刚设法让你的字体正常工作看看我的代码我把所有文件都放在了 HTML 的根目录中

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Font Test</title>


  <style>
  @font-face{ 
	font-family: 'MyWebFont';
	src: url('lmmono10-regular-webfont.eot');
	src: url('lmmono10-regular-webfont.eot?iefix') format('eot'),
	     url('lmmono10-regular-webfont.woff') format('woff'),
	     url('lmmono10-regular-webfont.ttf') format('truetype'),
	     url('lmmono10-regular-webfont.svg#webfont') format('svg');
	}

	p { font-family: 'MyWebFont'; }
  </style>

</head>

<body>
<p>My Test</p>
</body>
</html>

希望对你有帮助

【讨论】：

这很有帮助，因为我了解到如何命名字体系列并不重要，但是.. 它仍然不起作用。它的疯狂。
也许是我使用引导程序影响了某些字体？？
我刚刚在上面放了最新的引导 CDN，它并没有影响编辑你对目录结构和代码的问题，我会看看
或者把网址发给我，我去看看