Fatal编程技术网
  • css/
  • Css 字体系列是否不可用？

Css 字体系列是否不可用？

css

Css 字体系列是否不可用？,css,font-face,font-awesome,Css,Font Face,Font Awesome,这无疑是我在做一些非常愚蠢的事情，但我看不出来。我试图在css中使用FontAwesome作为字体系列，但它似乎不起作用 用最少的代码，我有： <head> <link href="assets/css/font-awesome.css" rel="stylesheet"> <style> body { font-family: FontAwesome; } </style&

这无疑是我在做一些非常愚蠢的事情，但我看不出来。我试图在css中使用FontAwesome作为字体系列，但它似乎不起作用

用最少的代码，我有：

<head>
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <style>
        body {
            font-family: FontAwesome;
        }
    </style>
</head>
<body>
    Test FontAwesome!
</body>
将
。
更改为
assets
会出现一个明显的错误，即它找不到字体，因此我非常确定相对路径是正确的。如果我将其更改为
font-family:fontsawesome，Arial，它使用Arial。很明显，它找不到真棒，我也不知道为什么


有什么特别的原因使我不能将我的身体字体改为FontAwesome吗？
需要回答的第一个问题是你使用的是什么web浏览器。并非所有浏览器都支持自定义字体。有些是这样的，但只使用了额外的乱七八糟的CSS/HTML


我建议首先在Chrome中测试它（它似乎有最好的字体支持）。
你写错了：
font-family:fontsawesome

请这样写<代码>字体系列：'FontAwesome'


我想这会对你有所帮助，因为我在一个月前就遇到了同样的问题。
更好的方法是使用以下方法：


<head>

<!-- fonts awesome -->

<link href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

</head>



不少于，不多于：）
您正在列出相对路径，有时它们会由于拼写错误而导致意外问题。我无法计算有多少次我把链接搞砸了，因为实际上有一个名为
font
而不是
font
的文件夹

请尝试Yovav的答案（）（如下）以查看是否可以解决问题。如果不能，请尝试使用绝对路径，或者确保链接正确

如果您正在努力使用本地字体，您可以通过cdn尝试使用“远程”字体（这样做的好处可能是浏览器已经从其他站点缓存了字体）


字体字符是仅存储在Unicode的专用区域中的图标，因此，如果文本不使用这些字符，则无法看到字体


试试
确保服务器能够识别.woff和.woff2

在web.config中的元素处添加以下内容：


<staticContent>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>



在样式名称中添加“before”一词之前，我无法使其正常工作。那帮我修好了


.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}



如果a可以是a，则不需要引号。您不希望仅为其
字体面
规则导入所有CSS。解决了我的错误，谢谢@Yovav。这是有道理的，因为IIS服务器可能会阻止某些文件扩展名。添加此命令会告诉IIS允许执行这些文件扩展名

// Swap http for https if required.

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}



<staticContent>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>



.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}