Question

我在我的网站上使用font作为字体存储在我的项目文件夹下我在css中使用了这段代码。

我的css

 @font-face
{
font-family: buddys;
src: url('/fonts/Kristen-ITC-Regular.ttf'),
     url('/fonts/Kristen-ITC-Regular.eot'); /* IE9 */
}

它在localhost上工作，而它上传到实时字体样式不适用于我的网站。如何使其在现场工作。

感谢。

Answer 1

在使用Visual Studio时，您需要将每个网络字体的构建操作设置为属性下的“内容”。如果不这样做，您的字体文件将不会包含在部署包中，也不会进入您的服务器。

此外，我建议改进CSS中的@font-face代码以包含所有格式（您可以使用font squirrel来帮助解决此问题：http://www.fontsquirrel.com/fontface/generator）。另外值得一读的是这篇关于最兼容的代码的文章：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Answer 2

您确定将实际字体上传到您的网络服务器且路径是否正确？

我建议指定所有图像文件：

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

要从font-face文件生成所有文件，只需使用this

等工具即可

Answer 3

您的字体路径是绝对的。检查一下。

Answer 4

如果您的css文件位于名为：'css'的文件夹中，而且字体dir和css目录位于名为'assets'的同一文件夹中。

然后：我认为你的css代码应该是：

 @font-face
{
font-family: buddys;
src: url('../fonts/Kristen-ITC-Regular.ttf'),
     url('../fonts/Kristen-ITC-Regular.eot'); /* IE9 */
}

@ font-face在localhost中工作而不是在实时服务器中

4 个答案: