CSS/HTML 代码不工作，字体没有被应用答案

【问题标题】：CSS/HTML code isn't working, font isn't getting appliedCSS/HTML 代码不工作，字体没有被应用
【发布时间】：2013-01-10 03:33:00
【问题描述】：

当我尝试运行这个 CSS/HTML 代码（这是在 webkit 浏览器中）时，它不起作用。输入框中的字体没有应用Lato字体：

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet'
        type='text/css'>
        <title>Dumb Search</title>
        <meta name="apple-mobile-web-app-capable" content="yes"
        />
        <link rel="apple-touch-icon-precomposed" href="../ds.png" />
        <meta name="viewport" content="width = device-width, user-scalable = no, initial-scale = 0.8">
        <style>
            .box {
                padding:20px;
                width:290px;
                box-shadow:0px 1px 3px -1px #c3c3c3;
                background-color:white;
                color:gray;
                font-family:Lato;
                text-align:left;
            }

        </style>
    </head>
    <body bgcolor="#f5f5f5">
        <center>
            <br>
            <div style="position:relative;width:342px;">
                <form action="searchcompleted.php" style="display:inline;">
                    <input name="q" value="Search, or tap the camera" class="box" style="border:0;outline:0;width:340px;color:#A0A0A0;padding-top:15px;padding-bottom:15px;"
                    onfocus="if (this.value == 'Search, or tap the camera') {this.value = '';}"
                    onblur="if (this.value == '') {this.value = 'Search, or tap the camera';}">
                </form>
                <img src="http://i45.tinypic.com/30vkbhj.jpg" style="position:absolute;top:0px;left:278px;opacity:0.4;height:30px;padding:15px;padding-right:17px;"
                onclick='void(0);document.getElementById("thisone").click();'>
                <form style="display:inline;" action="http://www.dumbsearch.com/dumbocr/post.php"
                method="post" enctype="multipart/form-data" id="sniff">
                    <input accept="image/*" type="file" style="display:none;" id="thisone"
                    onchange='document.getElementById("scan").style.display="block";' name="photo">
                    <div onclick='void(0);document.getElementById("sniff").submit();' style="position:absolute;top:65px;left:195px;background-color:white;border:0;box-shadow: 0px 1px 3px -1px #C3C3C3;padding:20px;color:#0EBFE9;padidng-left:25px;padding-right:25px;z-index:4;display:none;font-family:Lato;"
                    id="scan">Touch to scan</div>
                </form>
            </div>
            <br>
            <div class="box">ï»¿</div>
    </body>

</html>

非常感谢你！提前！

编辑：看这里：http://pastehtml.com/view/cokmdi9yg.html

【问题讨论】：

这部分代码没有应用字体？ <input name="q" value="Search, or tap the camera" class="box" style="border:0;outline:0;width:340px;color:#A0A0A0;padding-top:15px;padding-bottom:15px;font-family:Lato;" onfocus="if (this.value == 'Search, or tap the camera') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search, or tap the camera';}">
你用的是什么浏览器？ @font-face 规则在 IE 8 及更早版本中不起作用。
为我工作：jsfiddle.net/HZZKG
字体大小为什么要这样？您没有在第一个类中应用字体大小。
您应该在说明中指定字体大小。字体和字体大小是两个不同的东西。

标签： html css input

【解决方案1】：

在字体系列中试试这个

 @font-family
{
font-family: FirstFont;
src: url('.ttf');
}

【讨论】：

【解决方案2】：

这个问题显然根本不是关于字体，或者特别是关于谷歌字体，而是关于字体大小。浏览器通常会在输入框中应用缩小的字体大小，例如复制文本大小的 90%。如果您在 Chrome 中使用开发人员工具 (F12) 检查页面，您可以看到应用于元素的声明之一是 font: -webkit-small-control。这将设置字体系列和字体大小，您现在只覆盖字体系列部分。

例如，要使输入框中的文本与一般文档正文中的文本相同（或者，正式地，与周围元素中的相同），只需添加以下 CSS 规则：

input { font-size: 100%; }

【讨论】：

是的，这就是我需要的。很抱歉给大家带来了困惑。我的问题不清楚！

【解决方案3】：

像这样键入font family 声明：font-family: 'Lato'; 它必须用引号引起来。

【讨论】：

【解决方案4】：

字体系列“lato”在 CSS 中不可用，因此请使用此代码导入“Lato”。下载Lato的ttf和eot文件。

@font-face
{
font-family: FirstFont;
src: url('.ttf'),
     url('.eot'); 
}

【讨论】：

在看这里之前我没有使用过 lato：pastehtml.com/view/cokmdi9yg.html（通过 google 字体）