@font face中的ttf文件在Windows笔记本电脑上不起作用

Question

我是web开发的新手，不确定这是否是一个常见问题。我试图使用字体来实现TTF格式的字体。

我试过

@font-face {
font-family: "Univers-light-normal";
src: url(font-family/Univers-light-normal.ttf);
}

以及

@font-face {
font-family: "Univers-light-normal";
src: url(font-family/Univers-light-normal.ttf) format("truetype");
}

但两者都不起作用。我还尝试清除浏览器的缓存，但仍然无法正常工作。虽然这次我在Mac上打开了相同的HTML/CSS文件(最初使用Windows笔记本电脑，但在两台笔记本电脑上都使用谷歌Chrome(，但它似乎确实有效。

我已经安装了字体。第一个代码适用于OTF文件。我猜我得到的文件是Mac TrueType字体，而不是Windows TrueType字体？如果是这样的话，有没有办法区分呢？我怎样才能让它在Windows笔记本电脑上工作？

如果还有其他可能的原因不起作用，也请告诉我。

Answer 1

你可以试试这个，因为它对我有用：

• src的单引号
• 尝试精确查找包含TTF文件的文件夹，例如"/fonts/SFarianSystem.ttf'

或者你可以看看这个：

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

此外，请尝试使用字体的URL(更容易使用(，而不是本地字体，因为如果不重新加载字体，有时可能会导致问题。