Change Font Size and/or Family
Prev Themes Next
Home   Single Page

フォントサイズの変更　と/または ファミリー

フォントサイズとファミリーを変えるには二通りの方法があります。ライブラリー プロパティを使う方法と、 built-in CSS ファイルを方法です。

ライブラリープロパティの使用
Use the Library Properties

built-in テーマは次の変数をフォントサイズの制御に使用しています。

Name

Default

Description

org.zkoss.zul.theme.fontSizeM

12px

The default font size. It is used in the most components.

org.zkoss.zul.theme.fontSizeS

11px

The smaller font size used in the component that requires small fonts, such as toolbar.

org.zkoss.zul.theme.fontSizeXS

10px

The extremely small font size; rarely used.

org.zkoss.zul.theme.fontSizeMS

11px

The font size used in the menu items.

デフォルト値を変えるには、 WEB-INF/zk.xml 内のライブラリープロパティを次のように指定します。

<library-property>
    <name>org.zkoss.zul.theme.fontSizeM</name>
      <value>12px</value>
</library-property>
<library-property>
    <name>org.zkoss.zul.theme.fontSizeS</name>
      <value>10px</value>
</library-property>
<library-property>
    <name>org.zkoss.zul.theme.fontSizeXS</name>
       <value>9px</value>
</library-property>

次の built-in 変数はフォントファミリーを制御します。

Name

Description

org.zkoss.zul.theme.fontSizeT

Default: Verdana, Tahoma, Arial, Helvetica, sans-serif

The font family used for titles and captions.

org.zkoss.zul.theme.fontSizeC

Default: Verdana, Tahoma, Arial, serif

The font family used for conntents.

Smaller フォントの Built-in テーマを使用する

smaller フォントのテーマは normsm*.css.dsp と呼ばれます。これを使用するには次のように WEB-INF/zk.xml を構成します。 

<desktop-config>
　　　　<disable-theme-uri>~./zul/css/norm*.css.dsp*</disable-theme-uri>
　　　　　　　<theme-uri>~./zul/css/normsm*.css.dsp*</theme-uri>
</desktop-config>

WEB-INF/zk.xml の構成方法についての詳細は Developer's Reference を参照してください。

Larger フォントの Built-in テーマを使用する

larger フォントのテーマは normlg*.css.dsp と呼ばれます。これを使用するには次のように WEB-INF/zk.xml を構成します。 

<desktop-config>
      <disable-theme-uri>~./zul/css/norm*.css.dsp*</disable-theme-uri>
          <theme-uri>~./zul/css/normlg*.css.dsp*</theme-uri>
</desktop-config>

ロケールに依存してテーマを使用する

より大きなフォントを中国のロケールのときのみ使用するのは普通です。そんな時、次のように WEB-INF/zk.xml を構成します。 

<desktop-config>
      <disable-theme-uri>~./zul/css/norm*.css.dsp*</disable-theme-uri>
          <theme-uri>~./zul/css/norm**.css.dsp</theme-uri>
</desktop-config>
Prev Up Next
Themes Home Use Your Own Theme