none
フォントを統一したい RRS feed

  • 質問

  • お世話になります、ボビンと申します。

     

    現在VB2008にてwebアプリの開発を行っています。

    質問内容は全てのコントロールに対して、「MS Pゴシック」を指定したいと

    思っています。cssでbodyに対してfont-familyで指定しているのですが、

    コントロールによっては、個別のスタイルに対してfont-familyを指定しないと

    デフォルトのフォントが指定され、「MS Pゴシック」にならないようです。

     

    具体的には、AjaxControlToolkitのTabContainerに

    配置しているGridviewで、登録した外字が化けてしまっています。

     

    よろしくお願いします。

    2011年2月3日 4:20

回答

  • AjaxControlToolkit側で自動的にCSSを生成していて、その中にはfont-familyを指定しているものもあるようです。

    例) TabContainerを置いた時に生成されるCSSの中身の一部

    .ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px; (省略) }
    .ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt; (省略) }

    実際にどういう構造になるのかはわかりませんが、

    <body>
     <div id="MainContent_TabContainer">
      <div id="MainContent_TabContainer_Header"> (TabContainerのヘッダ) </div>
      <div id="MainContent_TabContainer_Body"> (tabContainerのボディ) </div>
     </div>
    </body>
    

    という感じになると思われるので、TabContainerの中身はBodyで指定したfont-familyを継承しないと思います。

    他のAjaxControlToolkitのコントロールでも直接指定されてしまっていると思うので、

    個別に設定しないと反映されないという状態になっていたのではないでしょうか。

    AjaxControlToolkitは最重要宣言でfont-familyを指定していないようなので、

    全要素に対してfont-familyを最重要宣言を付けて指定するCSSを書いてあげれば上書きされずにすむと思います。

     

    参考:

    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
     6 Assigning property values, Cascading, and Inheritance
      6.4.2 !important rules

    http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#important-rules

     

    • 回答としてマーク ボビン 2011年2月3日 7:57
    2011年2月3日 7:13

すべての返信

  • AjaxControlToolkit側で自動的にCSSを生成していて、その中にはfont-familyを指定しているものもあるようです。

    例) TabContainerを置いた時に生成されるCSSの中身の一部

    .ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px; (省略) }
    .ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt; (省略) }

    実際にどういう構造になるのかはわかりませんが、

    <body>
     <div id="MainContent_TabContainer">
      <div id="MainContent_TabContainer_Header"> (TabContainerのヘッダ) </div>
      <div id="MainContent_TabContainer_Body"> (tabContainerのボディ) </div>
     </div>
    </body>
    

    という感じになると思われるので、TabContainerの中身はBodyで指定したfont-familyを継承しないと思います。

    他のAjaxControlToolkitのコントロールでも直接指定されてしまっていると思うので、

    個別に設定しないと反映されないという状態になっていたのではないでしょうか。

    AjaxControlToolkitは最重要宣言でfont-familyを指定していないようなので、

    全要素に対してfont-familyを最重要宣言を付けて指定するCSSを書いてあげれば上書きされずにすむと思います。

     

    参考:

    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
     6 Assigning property values, Cascading, and Inheritance
      6.4.2 !important rules

    http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#important-rules

     

    • 回答としてマーク ボビン 2011年2月3日 7:57
    2011年2月3日 7:13
  • お返事ありがとうございます。

    >全要素に対してfont-familyを最重要宣言を付けて指定するCSSを書いてあげれば上書きされずにすむと思います。

    なるほど、やはり規定のcssが反映されているのですね。

    個別に指定する事が対応します。

    どうもありがとうございました。

     

    2011年2月3日 7:57
  • 一応補足しておきますが、

    全要素にfont-familyを指定っていうのはstyle属性で一つ一つ設定すること等ではなく、

     * { font-family : MS Pゴシック !important; }
    

    ということを想定して書いてました。これくらいであればbodyに指定するのと変わりは無いかと思いまして。

    ちなみに、AjaxControlToolkitは外部スタイルシートの読み込みタグをHead要素の一番最後に加えるので

    自分で書いた外部スタイルシートの内容を上書きされないように最重要宣言を付ける必要があるのですが、

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"><br/>    <style type="text/css">* { font-family : MS Pゴシック; }</style>
    </asp:Content>
    
    のように内部にstyle要素で直接書き込んでしまえば最重要宣言は不要です。
    2011年2月3日 9:01