[解決済み] 新しいフォントをプロジェクトにインポートする方法 - Angular 5
2023-03-17 04:40:10
質問
Angular 5のプロジェクトに新しいフォントをインポートしたいのですが、どうすればよいですか?
私は試してみました。
1) assets/fonts/ にファイルをコピーする。
2) それを
.angular-cli.json
スタイル
となっていますが、確認したところ、このファイルは
.css
であり、それは
.otf
のように動作し
.exe
(それはインストーラです)だから私はそれをインポートする方法が本当にわからない。何かアイデアはありますか?
どのように解決するのですか?
assetsフォルダ(assetsの中にfontsのサブフォルダがあるかもしれません)にフォントファイルを置いて、スタイルでそれを参照する必要があります。
@font-face {
font-family: lato;
src: url(assets/font/Lato.otf) format("opentype");
}
これで、このフォントを任意の場所に適用することができます。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'lato', 'arial', sans-serif;
}
を置くと
@font-face
の定義をグローバルな
styles.css
または
styles.scss
と記述すれば、コンポーネント固有の CSS/SCSS でさえも、どこでもフォントを参照できるようになります。
styles.css
または
styles.scss
はすでに
angular-cli.json
. あるいは、別のCSS/SCSSファイルを作成し、それをangular-cli.jsonの中で
styles.css
または
styles.scss
のように
"styles": [
"styles.css",
"fonts.css"
],
関連
-
[解決済み] 同じフォントに対して複数のフォントファイルを追加する方法を教えてください。
-
[解決済み] Angular CLI SASSオプション
-
[解決済み】OTFフォントの適切なMIMEタイプについて
-
[解決済み】angular-cliプロジェクトにbootstrapを追加する方法
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] Angular 2のFormGroupからすべての検証エラーを取得する
-
[解決済み] Angular2でNgForがPipeでデータを更新しない。
-
[解決済み] Angular v5からAngular v6にプロジェクトをアップグレードしたい。
-
[解決済み] Angular - ngForの中のngIfの中のパラメータを持つng-template [重複]。
-
[解決済み] Angularのビルドと実行方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] Angular 2: 反応するフォームコントロールの反復処理
-
[解決済み] Angular 2のFormGroupからすべての検証エラーを取得する
-
[解決済み] .tsファイルはTypeScriptのコンパイルの一部ですが、使用されていませんという警告を消すには?
-
[解決済み] Angular 4+ ngOnDestroy() サービス中 - observableを破壊する
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] Error: モジュールによってインポートされた予期しない値 'undefined'。
-
[解決済み] 遅延のあるobservableを作成するには?
-
[解決済み] Reactive Forms - フィールドをタッチしたものとしてマークする
-
[解決済み] Angular Material 2 ネストされたオブジェクトによるデータテーブルのソート