CSS 技巧在 Chrome 的占位符中字体真棒

谁能告诉我为什么我的字体很棒在 chrome 中无法正常工作，尽管它在 Firefox 上工作正常？但是如果我删除了很棒的字体，那么它又变得没问题了。点击这里查看图片

这是我的表单的 HTML 代码：

    <!DOCTYPE html>
<html>
<head>
    <title>Student-login</title>
    <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
    <div class="body"></div>
        <div class="main-form">
            <h1>Student Registration</h1>
            <form class="login" name="register" action="database.php" method="post">
                <input type="text" placeholder="&#xf007; User name(*)" name="username"></input><br>
                <input type="password" placeholder="&#xf023; Password(*)" name="password"></input><br>
                <input type="text" placeholder="&#xf040; First name(*)" name="first_name"></input><br>
                <input type="text" placeholder="&#xf040; Last name(*)" name="last_name"></input><br>
                <select name="gender">
                    <option value="">Gender</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select><br>
                <input type="text" placeholder="&#xf0e0;  E-mail(*)" name="email"></input><br>
                <input type="text" placeholder="&#xf095; Phone number(*)" name="phone"></input><br>
                <div class="button"><a href="login.html">Login <i class="fa fa-arrow-circle-right"></i></a></div>
                <input type="submit" value="Submit" name="btnsubmit"></input>
            </form>
        </div>
</body>
</html>

这是 CSS：

    .body{
    position: absolute;
    top:0px;
    left: -10px;
    right: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    background-image: url("background.jpg");
    background-size: cover;
    -webkit-filter: blur(5px);
    filter:blur(5px);
    z-index: 0;
}
h1{
    font-family: 'Shadows Into Light', cursive;
    color: #282828;
    text-align: center;
    margin: 2%;
}
.main-form{
    float: right;
    margin-top: 3%;
    height:auto;
    border-radius: 3px;
    background:#F0F0F0;
    opacity: .6;
    padding-top: 1%;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 1%;
    position: relative;
    z-index: 1;
}
.login input[type="text"]{
    width: 260px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family:FontAwesome;
}
.login input[type="text"]:focus{
    border: 1px solid #0033FF;
}
.login input[type="password"]{
    width: 260px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family:FontAwesome;
}
.login input[type="password"]:focus{
    border: 1px solid #0033FF;
}
.login input[type="button"]{
    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login input[type="button"]:hover{
    background-color: #404040;
    color: white;
}
.login input[type="submit"]{
    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login input[type="submit"]:hover{
    background-color: #404040;
    color: white;
}
.button {
    width: 270px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    color:black;
    text-align: center;
}
.button a{
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    color:black;
    text-align: center;
}
.button:hover{
    background-color: #404040;
}
.button:hover a{
    color: white;
}
.login select{
    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login select:hover{
    background-color: #404040;
    color: white;
}
::-webkit-input-placeholder {
    color: red;
    opacity: .8 !important;
}
:-moz-placeholder { /* Firefox 18- */
    color: red;  
    opacity: .8 !important;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: red;  
    opacity: .8 !important;
}
:-ms-input-placeholder {  
    color: red;  
    opacity: .8 !important;
}

请尝试为您要使用的字体添加内联样式。例：

<input type="text" placeholder="&#xf007; User name(*)" name="username" style="font-family:Arial, FontAwesome"></input>

这里有一个提出类似问题的线程中有更多关于这种方法的信息

感谢@JDTLH9给我一个问题的线索，实际上你不必使用内联样式，但在我使用的以前的设计中

{font-family:fontawesome};

但是当我将其转换为此时：

{font-family:Arial,fontawesome}

它在铬中对我有用。

相关内容

最新更新

热门标签：