html - 字体机器人不起作用

Question

我正在尝试添加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');
}

score 3 · Accepted Answer

你可以删除所有的 @font-face 子句，然后在你想使用 Roboto 的任何类上使用这个属性：

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

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

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

此外，始终将字体包含在<head>元素的顶部，在 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>

score 1 · Accepted Answer

您的字体系列设置应该是：

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

并且您使用以下方法为您的字体设置不同的权重：

font-weight: 400;

或者

font-weight: 700;

html - 字体机器人不起作用

2 回答 2

Related

Reference