web-dev-qa-db-ja.com

フォントファミリはフォーム入力フィールドに継承されませんか？

入力テキストフィールドや選択ボックスなどのHTMLフォーム入力要素は、本文からfont-familyプロパティを自動的に継承しませんか？例えば：

body {
 font-family:'Lucida Casual', 'Comic Sans MS';
}

以下のフォーム入力フィールドで上記のフォントを使用しません。

<form> 
   <div>
        <label for="name">Name</label>  
        <input id="name" name="name" type="text" />  

   <div>
</form>

http://jsfiddle.net/3fkNJ/ をご覧ください

入力フィールドのフォントファミリを再定義しなければならないことはよくありますか、何か間違っていますか？

htmlcssformsfontsinput
38
sunjie

はい、fontをinputタグに配置する必要があります。

input{
  padding:5px;
  font-size:16px;
  font-family:'Lucida Casual', 'Comic Sans MS';    
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

inheritを使用して、fontフィールドにformを設定することもできます。

input, textarea, select { font-family:inherit; }

http://jsfiddle.net/jasongennaro/3fkNJ/7/

[〜＃〜] edit [〜＃〜]-説明を追加

ほとんどのブラウザは、form要素内のテキストをユーザーのオペレーティングシステムのテキストとしてレンダリングします。これは、私が理解しているように、ユーザーの一般的なルックアンドフィールを維持するためです。ただし、上記のコードですべて上書きできます。

46
Jason Gennaro

コードに問題はありません。これは、入力フィールドがデフォルトでOSテーマの設定を取得するためによく起こります。これは、stackoverflowで既に説明されています。詳細については、以下のリンクをご覧ください。

なぜ<textarea>および<textfield>はbodyからfont-familyおよびfont-sizeを取得しないのですか？

4
z0mBi3

CSS body属性を次のように変更してみてください

body *{font-family:'Lucida Casual', 'Comic Sans MS';}

*は、すべての子要素が、CSSルール指定仕様のために記述したCSSルール内の指定された値を継承するように強制します。 フィドルはこちら を参照してください

これは、ページ上のすべての要素に同じfont-family値を持たせたい場合に便利です。フォームに異なる値を持たせたい場合にはそれほど便利ではありません。

Smashing Magazineには記事があります これはさらに役立つかもしれません。

役に立てば幸いです。

1
Ryan

それは私のために働いた：

tags-input *, tags-input *:before, tags-input *:after {
  font-family: "IRANSans" !important;
}

tags-input .tags .input {
  padding-right: 5px;
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}

tags-input .tags .tag-item {
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}
0
iman