Vuforia Studio での CSS とスタイルの使用

「スタイル」の「プロジェクト」枠で「アプリケーション」をクリックし、アプリケーションスタイルエディタで CSS を入力します。たとえば、以下のように入力して、ボタンのクラスを作成することができます。

.my-button {
font-family: Century Gothic;
color: black;
font-weight: normal;
font-style: italic;
background-color: grey
}

次に、ボタンの「詳細」枠の「クラス」フィールドに以下の値を入力します。

クラスに一意の名前を付けて、別のクラスや OOTB プロパティと競合しないようにすることをお勧めします。

この値は、「スタイル」 > 「アプリケーション」で追加されたコンテンツを参照します。

新しいスタイルがキャンバスにすぐに反映されない場合は、プロジェクトを保存してみてください。

いくつかの CSS の例を試すには、個別のウィジェットのトピックを確認してください。

カスタムフォントは、アプリケーションスタイラーを使用して Vuforia Studio にインポートできます。次に例を示します。

@import url(//fonts.googleapis.com/css?family=Bowlby+One);
.specialfont{
font-family:'Bowlby One';
}

アプリケーションエディタで上記を追加した後、インポートしたフォントをクラスで使用できるようになります。例:

アプリケーションの CSS ファイルで設定されたスタイルは、同じセレクタを使用すると仮定して、デフォルトテーマの CSS をオーバーライドします。セレクタの特異性によって、テーマのスタイルが単一のクラス宣言をオーバーライドする場合があります。セレクタの特異性の詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity を参照してください。

ウィジェットのスタイル関連のプロパティは、インラインスタイルのプロパティを使用して設定されているため、アプリケーションの CSS またはテーマで設定したスタイルをオーバーライドします。ウィジェットのプロパティは、ジェネリック規則のローカルオーバーライドであると考えることができます。

状態フォーマット機能は、前述のファイルの後にスタイルを挿入するため、アプリケーションの CSS とテーマをオーバーライドします。ただし、状態フォーマットは、!important オーバーライド構文または特異性が非常に高いセレクタを使用するアプリケーションスタイルでオーバーライドされる可能性があります。