将字体应用于标签和按钮css3

时间:2014-10-14 16:35:56

标签: html5 css3 label

您好我的问题如下,我导入了一个字体,当我将样式应用于h3元素时它工作正常,但是当我将样式应用于标签或按钮时,不要使用字体,如果你可以告诉我如何在这些元素上做到这一点,我会非常有意思。

    <!doctype html>
<html>
<head>
<style>
@font-face {
    font-family: signika-regular-webfont;   
    src: url('fonts/signika-regular-webfont.ttf');
}
.fuente {
    font:signika-regular-webfont !important;    
    font-family: signika-regular-webfont, sans-serif;
    font-weight:bold;
    }
</style>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<h3 class="fuente" >este es un ejemplo </h3>
<br>
<label class="fuente" >este es un ejemplo </label>
<body>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您的标记错误,如以下标记

<h3 class="fuente" >este es un ejemplo </h3>
<br>
<label class="fuente" >este es un ejemplo </label>

不在<body>标记内。

关于<label>的使用,请阅读http://www.w3.org/wiki/HTML/Elements/label

然后,我建议您使用http://www.fontsquirrel.com/tools/webfont-generator转换您的字体文件。确保您有权使用这些字体。转换后,您将拥有四个不同的webfont文件(.ttf,.eot,.woff和.svg)

所以你的代码看起来像这样:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
    <style>
        @font-face {
            font-family: 'signika-regular-webfont';
            src: url('signika-regular-webfont.eot');
            src: url('signika-regular-webfont.eot?#iefix') format('embedded-opentype'),
                 url('signika-regular-webfont.woff') format('woff'),
                 url('signika-regular-webfont.ttf') format('truetype'),
                 url('signika-regular-webfont.svg#signika-regular-webfont') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        /* sans-serif doesn't need quotes */
        .fuente {
            font-family: 'signika-regular-webfont', sans-serif;
        }
    </style>
</head>
<body>
    <h3 class="fuente" >este es un ejemplo </h3>
    <br>
    <label class="fuente" >este es un ejemplo </label>
</body>
</html>