Roboto字体无法使用。

Question

Roboto字体无法使用。

htmlcssfontsroboto

3

我正在尝试添加Roboto Regular和Roboto Light字体，但似乎无效。由于不知道该如何操作，所以现在请求指导...

以下是代码链接：

https://jsfiddle.net/omer1234/rmje7xz3/12/

HTML代码：

<!doctype html>
<html ng-app="MyApp">
<head>
                <link rel="stylesheet" href="noteBack.css">
                <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
                <!-- Latest compiled and minified CSS -->
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

                <!-- Optional theme -->
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

                <!-- Latest compiled and minified JavaScript -->
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

                <link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css">
                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
                <script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.js"></script>
                <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>



</head>
<body>
        <div class="container-box ">
            <header><span>Note Details</span></header>
            <div class="sub-header"><span>Friday 25.7.13 </span></div>

            <div class="sub-container-box opacity-affect">
            <div class="dialog-box"><!--first white box inside the note-->
                <div class="dialog-box-circle"></div>
                <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
                <span class="dialog-box-name">Lea Poran -<select>
                <option>@private</option>       
                <option>@public</option>        
               </select>
               </span>
               <span class="dialog-box-day">2d ago</span>

               <div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>

            </div>

                <div class="dialog-box"> <!--second white box inside the note-->
                <div class="dialog-box-circle"></div>
                <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
                <span class="dialog-box-name">You -<select>
                <option>@private</option>       
                <option>@public</option>        
               </select>
               </span>
               <span class="dialog-box-day">2d ago</span>

               <div class="dialog-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet ex vitae mi venenatis odio felis convallis. Praesent ut consequat orci, amet elit mollis molestie. Curabitur rhoncus enim </div>

            </div>

                <div class="dialog-box"> <!--third white box inside the note-->
                <div class="dialog-box-circle"></div>
                <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
                <span class="dialog-box-name">You -<select>
                <option>@private</option>       
                <option>@public</option>        
               </select>
               </span>
               <span class="dialog-box-day">3d ago</span>

               <div class="dialog-box-text">In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eget eros pretium, sagittis tortor at, tempor turpis. Morbi porttitor nulla urna, sed tincidunt eros mollis eu. Nam gravida est sit </div>

            </div>

            <div class="dialog-box-date"> <!--gray box - contains the date-->
            <span class="dialog-box-date-text">In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eg
            </span>
            </div>

            <div class="dialog-box"><!--replay of the first white box inside the note-->
                <div class="dialog-box-circle"></div>
                <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
                <span class="dialog-box-name">Lea Poran -<select>
                <option>@private</option>       
                <option>@public</option>        
               </select>
               </span>
               <span class="dialog-box-day">2d ago</span>

               <div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>

            </div>
                <img src="D:\Meeter1\first assaiment home\attach.png">
            </div> <!--close sub-container-->
          <img src="D:\Meeter1\first assaiment home\attach.png">
        </div>
</body>
</html>

CSS：

.container-box{     
    /*position:absolute;*/
    width:382px;
    height:529px;
    background-color:lightgray;
    overflow:hidden;
    border:1px solid #cccccc;
    margin:auto;


}
/* .opacity-affect{                 //After button click blur the background

    opacity:0.5;
}    */

header{                     /*the red head line*/
    position:relative;
    width:100%;
    height:41px;
    color:white;
    background-color:#de4b4b;   
    font-weight: bold;
    font-size:14px;
    margin:auto;

}
header span{         /*text inside the  red head line*/
display:inline-block;
padding-left:148px;
padding-top:14px;
padding-bottom:14px;

}
.sub-header{         /*white sub head line*/
    position:relative;
    width:100%;
    height:37px;
    background-color:white;
    font-size:10px;
    color:#454545;
    font-family:'roboto_regular';


}
.sub-header span{         /*text inside the white sub head line*/
    display:inline-block;
    padding-top:14px;
    padding-left:10px;
}
.dialog-box{                    /*the white boxes inside the note main*/
    position:relative;
    width:365px;    
    background-color:white;
    margin: 0px 8px 10px 8px;
    border:1px solid #cccccc;
}
.dialog-box-circle{

    display:inline-block;
    float:left;
    width:35px;
    height:35px;
    border-radius:30px;
    background-color:#cccccc;
    margin:15px 10px 17px 15px;
    vertical-align:middle;/*allow text to appear next to the circle div */

}
.dialog-box-name{
    display:inline-block;
    color:#6495ED;
    font-size:12px;
    margin-top:21px;
    font-weight:bold;



}
.dialog-box-text{

    color:#040404;
    font-size:10px;
    font-family:'roboto_light';
    line-height:9px;     /*the space between the line*/
    margin-left:15px;
    margin-bottom:15px;
    margin-top:17px;
    margin-right:17px;
    bottom:0;
    left:0;


}
.dialog-box-name select {
        border:0px;
        font-size:10px;
        font-family:'roboto_regular';
        color:#454545;
        cursor: pointer;

}

.dialog-box-day{
    display:block;
    font-size:9px;
    font-family:'roboto_regular';
    margin:0px;
    font-weight:bold;

    }

.dialog-vertical-menu{
    float:right;
    margin:8px;

}
.dialog-box-date{        /*the gray box inside the note main*/
    position:relative;
    width:365px;    
    height:37px;
    margin: 0px 8px 10px 8px;
    background-color:#cccccc;

}   
.dialog-box-date-text {
    display:inline-block;
    font-family:'roboto_regular';
    font-size:9px;
    color:#000000;
    margin-left:15px;
    margin-top:15px;

}
@font-face {
    font-family: 'RobotoLight';
    src: url('fonts/RobotoLight.eot');
    src: url('fonts/RobotoLight.eot') format('embedded-opentype'),
         url('fonts/RobotoLight.woff2') format('woff2'),
         url('fonts/RobotoLight.woff') format('woff'),
         url('fonts/RobotoLight.ttf') format('truetype'),
         url('fonts/RobotoLight.svg#RobotoLight') format('svg');
}

@font-face {
    font-family: 'RobotoRegular';
    src: url('fonts/RobotoRegular.eot');
    src: url('fonts/RobotoRegular.eot') format('embedded-opentype'),
         url('fonts/RobotoRegular.woff2') format('woff2'),
         url('fonts/RobotoRegular.woff') format('woff'),
         url('fonts/RobotoRegular.ttf') format('truetype'),
         url('fonts/RobotoRegular.svg#RobotoRegular') format('svg');
}

- omer

你可以删除所有的@font-face语句，只需在想要使用Roboto的任何类上使用此属性：font-family: 'Roboto', sans-serif; 如果您不确定它是否在任何地方都起作用，请尝试添加此CSS进行调试：body{font-family: 'Roboto', sans-serif;} - D. Visser

1

为什么你要使用@font-face，而你又从Google Library调用Roboto字体。你必须定义Roboto字体族。 - Kheema Pandey

如何定义Roboto字体族？ - omer

2个回答

1

你的字体设置应该只是这样的：

font-family: 'Roboto', sans-serif;

你可以使用以下方法为字体设置不同的权重：

font-weight: 400;

或者

font-weight: 700;

- jakecfc1992

roboto-light >> 字重 400 - omer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- D. Visser · Accepted Answer

您可以删除所有的@font-face子句，只需在您想使用Roboto的任何类上使用此属性即可：

font-family: 'Roboto', sans-serif;

如果您不确定它是否在任何地方都有效，请尝试添加此CSS进行调试：

body{
    font-family: 'Roboto', sans-serif;
}

此外，始终将字体包含在您的元素顶部，位于CSS包含之上，如下所示：

（也就是说，在元素内先引入字体文件，再引入CSS文件）

<!DOCTYPE HTML>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <!-- Include font first -->
        <link href="style.css" rel="stylesheet"> <!-- Then include stylesheet -->
    </head>
    <body>
    </body>
</html>