Question

我的CSS正文使用CSS设置了字体样式，但它没有显示在table中。然后我将它添加到table中，它似乎仍然不想采用字体样式。

我看了一些其他帖子，但仍在努力。

CSS：

body {
    font-family: 'Indie Flower', cursive;
    background-image: url('../images/Landscape.jpg'); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    min-width: 100%;
    min-height: 100%;
}
table, th, td {
    font-family: 'Indie Flower', cursive;
}
table {
    margin-top: -446px;
    margin-right: 428px;
    z-index: 1;
    position: absolute, center;
    background-color: #F0F0F0; 
    border: 3px solid #FFF;
}
th {
    text-align: left;
    z-index: 3;
} 
td {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    z-index: 2;
    background-color: #F0F0F0; 
}

Answer 1

好的，所以你的问题是占位符需要字体，而不是table或inputs本身。

::-webkit-input-placeholder {
   font-family: 'Indie Flower', cursive;
}

:-moz-placeholder { /* Firefox 18- */
   font-family: 'Indie Flower', cursive;  
}

::-moz-placeholder {  /* Firefox 19+ */
   font-family: 'Indie Flower', cursive;  
}

:-ms-input-placeholder {  
   font-family: 'Indie Flower', cursive;  
}

然后，对于输入到输入中的文本，只需将样式添加到输入本身。

input {
  font-family: 'Indie Flower', cursive;
}

值得注意的是，您也可以使用font-family: inherit;而不是多次明确声明字体。如果您决定更改字体，这会使更新更容易。

Updated Fiddle

Answer 2

您必须将font-family放在input内，如下所示：

input{
    font-family:inherit;
}

如果您也想要按钮：

button{
    font-family:inherit;
}

FIDDLE

CSS：表格中未显示正文字体样式

2 个答案: