プレーヤのフォント

Product
Video Cloud
対象となる役割
開発者
バージョン
Brightcove 5
モジュール
BEML
エディション
Pro, Enterprise

カムタム プレーヤ テンプレートは、Brightcove Pro エディションおよび Enterprise エディションをご利用の方にのみ利用できますBrightcove アカウントのアップグレードについては、Brightcove にお問い合わせください。

Brightcove プレーヤの標準ラベルには、視聴者のマシンのオペレーティング システムにインストールされているシステム フォントが使用されます。デフォルトでは、すべてのフォントがシステムの Arial になっています。ラベルに使用するフォントをカスタマイズするには、少なくとも 3 種類の方法があります。

注:プレーヤ テンプレートのフォントを変更したら、変更されたプレーヤをプレビューして、ラベルがプレーヤ レイアウトに収まっていることを確認してください。選択したフォントによってラベルがデフォルトのラベルより大幅に長くなった場合、収まらずに表示が切れてしまったり、他のプレーヤ コンポーネントのレンダリングが正しく行われなくなったりします。そのような場合は、別のフォントを選択するか、ラベルの言葉を変えるか、ラベルが収まるようにプレーヤ レイアウトにも変更を行う必要があります。

グローバル フォントを設定する

プレーヤ テンプレートの Theme 要素で、フォントをグローバルで指定することができます。Theme 要素には、使用可能なグローバル フォント属性が 3 つあります。ボディ、タイトル、リンクです(ボタンには通常、リンクのフォントが使用されます)。ボディ、タイトル、またはリンクのすべてのテキストのフォントを変更するには、Theme ノードの該当する属性に使用したいフォントを設定します。たとえば、bodyFont、titleFont、linkFont にシステムの Times New Roman を設定するには、Theme 要素を次のように使用します。

<Theme name="Deluxe" style="Light" 
       bodyFont="Times New Roman" 
       titleFont="Times New Roman" 
       linkFont="Times New Roman" />

コンポーネント クラスにフォントを設定する

ボディ、タイトル、またはリンクのすべてのコンポーネントにグローバル レベルでフォントを設定する代わりに、プレーヤ テンプレート内のコンポーネント クラスごとにフォントを指定することができます。そのためには、Theme 要素の子として Style 要素を使用します。Style 要素では、コンポーネント クラスを class 属性で指定します。Style 要素内でインライン CSS を使用して、フォントやその他のスタイルを指定することができます。たとえば、プレーヤにあるすべての Label コンポーネントのボディ テキストに、システムの Times New Roman を設定するには、Theme 要素で次のような Style 要素を使用します。

<Style class="Label"><![CDATA[
.bodyText {
fontFace: "Times New Roman";
}
]]></Style>

次のコンポーネントにはフォント属性があり、上記のようにしてフォントを設定できます。

  • Button
  • Label
  • Link
  • TitleLabel
  • ToggleButton

コンポーネント インスタンスごとにフォントを設定する

プレーヤ テンプレートのコンポーネント インスタンスごとに、フォントを設定することもできます。そのためには、Theme 要素の子として Style 要素を使用します。Style 要素では、対象とするコンポーネント インスタンス 1 つを id 属性で指定します。Style 要素内でインライン CSS を使用して、フォントやその他のスタイルを指定することができます。たとえば、id を「myLabel」とする、ある Label コンポーネントのボディ テキストに、システムの Times New Roman を設定するには、Theme 要素で次のような Style 要素を使用します。

<Style id="myLabel"><![CDATA[
.bodyText {
fontFace: "Times New Roman";
}
]]></Style>

 

タグ
システム フォント