春色导航,国产99在线视频,国产福利在线播放

如何在Angular框架中更好地使用字體？一篇文章解密！

翻譯|行業(yè)資訊|編輯：龔雪|2022-12-22 11:31:11.100|閱讀 153 次

概述：本文介紹如何輕松將字體整合到Angular中，從而自定義Angular應用的外觀~

作為前端開發(fā)人員，在Angular JS中構建項目時，使用自定義字體可能會很棘手。有時候，如果開發(fā)者想要把選擇的字體添加到項目中，將不得不把它導入到現(xiàn)有的代碼中。

PS：Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級Angular組件，telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。

Kendo UI R3 2022正式版下載

Telerik_KendoUI產品技術交流群：726377843 歡迎一起進群討論

先決條件

Node.js
Npm

Step 1：創(chuàng)建一個簡單的Angular項目

首先，在命令提示符中使用以下命令來安裝Angular：

npm install -g @angular/cli

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

然后使用以下命令創(chuàng)建新項目：

ng new my-app

使用實例運行應用程序。

cd my-app
ng serve --open

應用程序應該在瀏覽器中自動打開URL: //localhost:4200/。

應該是這樣的：

Step 2：添加自定義HTML代碼

Angular應用的主頁是安裝它時附帶的默認主頁，要更新HTML代碼，請打開src文件夾中的index.html文件。

現(xiàn)在，用下面的代碼替換現(xiàn)有的代碼：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>hello</h1>
<h2>this is my angular app</h2>
<p>i need to add some new custom font to the project</p>
</body>
</html>

如果重啟服務器，進入//localhost:4200/頁面，它應該會顯示如下頁面：

Step 3：下載免費字體

要添加自定義字體，我們首先需要下載它。可以從任何地方下載字體，但我們使用谷歌字體，因為它們是免費和開源的。

Step 4：將字體導入Angular項目中

為了將字體文件導入到Angular項目中，.ttf文件必須放在src/assets文件夾中。一旦文件在正確的位置，就可以使用以下步驟將其導入到項目中：

1. 在src/styles.css文件中，為導入的字體添加一個新的@font-face規(guī)則。例如：

@font-face {
font-family: 'MyFont';
src: url('../assets/myfont.ttf');
}

注意：將“myfont.ttf”替換為您放在src/assets中的字體文件名。

2. 在將要使用字體的組件中，將導入的字體添加到組件的樣式表中。例如：

.my-component {
font-family: 'MyFont';
}

該字體現(xiàn)在將在組件中使用。

向項目中添加更多字體

首先，將字體導入并添加到源文件夾中。

現(xiàn)在添加了兩個新的@font-face規(guī)則來導入src/style.css文件夾中的字體。

@font-face {
font-family: 'Fontone';
src: url('src/font/Poppins.ttf');
}
@font-face {
font-family: 'Fonttwo';
src: url('src/font/Smooch.ttf');
}

然后改變src/index.html文件中h1和h2標簽的字體：

h1{
font-family: Fontone;
}

h2{
font-family: Fonttwo;
}

現(xiàn)在，如果你重新加載頁面，你應該會看到下面的輸出：

標簽：

本站文章除注明轉載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉載自：慧都網

上一篇：如何在報表控件Stimulsoft 中生成Maxicode條碼？下一篇：以數(shù)據(jù)賦能業(yè)務，qlik為企業(yè)搭建透明績效管理平臺

相關產品

控件

產品功能：UI界面

源碼：非開源

產品編號：13438

當前版本：2025 Q3 [銷售以商家最新版為準，如需其他版本，請來電咨詢]

開發(fā) 商： telerik

正式授權

">Kendo UI

全新升級的Kendo UI，是創(chuàng)建數(shù)據(jù)豐富的Web應用程序的最完整UI庫。

控件

產品功能：UI界面

源碼：非開源

產品編號：13969

當前版本：2025 Q3 [銷售以商家最新版為準，如需其他版本，請來電咨詢]

開發(fā) 商： telerik

正式授權

">Kendo UI for Angular

完整的Angular UI組件庫，助力構建高性能的現(xiàn)代Angular應用。

控件

產品功能：UI界面

源碼：非開源

產品編號：13968

當前版本：2025 Q3 [銷售以商家最新版為準，如需其他版本，請來電咨詢]

開發(fā) 商： telerik

正式授權

">Kendo UI for jQuery

完整的jQuery UI組件庫，可快速構建出色的高性能響應式Web應用程序。

控件

產品功能：UI界面

源碼：非開源

產品編號：13989

當前版本：2025 Q3 [銷售以商家最新版為準，如需其他版本，請來電咨詢]

開發(fā) 商： telerik

正式授權

">Kendo UI for Vue

創(chuàng)建響應式Web應用的完整UI組件庫。

控件

產品功能：UI界面

源碼：非開源

產品編號：13988

當前版本：2025 Q3 [銷售以商家最新版為準，如需其他版本，請來電咨詢]

開發(fā) 商： telerik

正式授權

">Kendo UI Support for React

支持React Javascript框架，更快地構建更好的應用程序。

最新文章 MORE

金喜正規(guī)買球相關的文章 MORE

国产精品青草久-国产精品情侣愉拍-国产精品区网红主-国产精品区一区二-国产精品热久久-国产精品热热热-国产精品人aⅴ-国产精品人成在线-国产精品人妻人伦-国产精品人人

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

如何在Angular框架中更好地使用字體？一篇文章解密！

先決條件

Step 1：創(chuàng)建一個簡單的Angular項目

Step 2：添加自定義HTML代碼

Step 3：下載免費字體

Step 4：將字體導入Angular項目中

向項目中添加更多字體

用科技創(chuàng)就卓越

Create excellence with technology

国产精品青草久-国产精品情侣愉拍-国产精品区网红主-国产精品区一区二-国产精品热久久-国产精品热热热-国产精品人aⅴ-国产精品人成在线-国产精品人妻人伦-国产精品人人

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

如何在Angular框架中更好地使用字體？一篇文章解密！

先決條件

Step 1：創(chuàng)建一個簡單的Angular項目

Step 2：添加自定義HTML代碼

Step 3：下載免費字體

Step 4：將字體導入Angular項目中

向項目中添加更多字體

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology