css chrome 占位符中的超赞字体技巧

Question

谁能告诉我为什么我的 awesome 字体在 chrome 中不能正常工作，虽然它在 firefox 上工作正常？但是如果我删除 awesome 字体然后它又恢复正常了。click here to see the image

这是我的表单的 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;
}

Answer 1

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

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

问类似问题的线程中有更多关于此方法的内容 here

Answer 2

感谢@JDTLH9 为我提供了解决问题的线索。实际上您不必使用内联样式，但在之前的设计中我使用的是

{font-family:fontawesome};

但是当我把它转换成这个时：

{font-family:Arial,fontawesome}

它在 chrome 对我有用。

css chrome 占位符中的超赞字体技巧

css tricks for font awesome in placeholder for chrome

html

css

google-chrome

placeholder