Question

我面临着一个奇怪的问题，我有一个HTML页面，我有一个BUTTON我想要应用css font-family。我写了它＆amp;应用于按钮。但是，它不会将该字体系列应用于该按钮。它看起来像默认按钮。

以下是我的代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-family: "Open Sans";

}

.button-2 {
    background: none repeat scroll 0 0 hsl(224, 46%, 61%);
    border: medium none;
    color: hsl(0, 0%, 100%);
    cursor: pointer;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
font-family: "Open Sans";
    margin-top:-18px;
}
.button-2:hover {
    background: none repeat scroll 0 0 hsl(224, 38%, 42%);
}

.button-1 {
    background: none repeat scroll 0 0 hsl(224, 46%, 61%);
    border: medium none;
    color: hsl(0, 0%, 100%);
    cursor: pointer;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: bold;
}
.button-1:hover {
    background: none repeat scroll 0 0 hsl(224, 38%, 42%);
}

.SixBlockerHeading  {
    background: none repeat scroll 0 0 hsl(224, 46%, 61%);
    border: medium none;
    color: hsl(0, 0%, 100%);
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: bold;
    padding: 8px 20px;
}
.SixBlockerHeading span {
    background: none repeat scroll 0 0 hsl(224, 38%, 42%);
    margin-right: 10px;
    padding: 10px;
}

.SixBlockerHeading {
    background: none repeat scroll 0 0 hsl(224, 46%, 61%);
    border: medium none;
    color: hsl(0, 0%, 100%);
    display: inline;
    float: left;
   font-family: "Open Sans";
    font-size: 14px;
    font-weight: bold;
    line-height: 37px;
    margin-top: 21px;
    padding: 0 20px 0 0;
    width: 354px;
}

.NewStyle
{
   text-transform:none;
   float: float;
   color: hsl(224, 38%, 42%);
   font-family: "Open Sans";
   font-size: 15px;
   margin-top: -10px; 
font-family: "Open Sans";
   margin-left:180px;
   display: inline;
}

-->
</style>



<a href="url goes here"><input type="submit" class="button-1" value="ADD"></a>
<a  href="url goes here"><input type="submit" class="button-2"  style=" background: hsl(224, 38%, 42%);" value="DONE"></a>


<h1 class="NewStyle" ><Strong>NEW PAGE</Strong></h1>
<div>

Answer 1

我想你可能会错过字体本身。您可以使用以下内容将其包含在CSS中：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

也可以只使用HTML：

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

...或JavaScript（不推荐）：

WebFontConfig = {
    google: {
        families: [ 'Open+Sans::latin' ]
    }
};

(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();

Answer 2

您需要包含font-family: "Open Sans";字体（默认情况下没有安装）

您可以使用@font-face将其包含在本地（使用服务器上的字体存储）。有一个很好的生成器here

或者您可以使用google webfonts之类的内容并将其添加到您的html :( head标记内）

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

他们将其用于：font-family: 'Open Sans', sans-serif;

（提供sans-serif字体作为后退）

您可以找到open sans字体权重/样式here

的完整列表

无法在HTML页面中应用css中的字体系列

2 个答案: