」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用 @font-face 規則在 CSS 中正確匯入字體?

如何使用 @font-face 規則在 CSS 中正確匯入字體?

發佈於2024-11-15
瀏覽:111

How to Properly Import Fonts in CSS using the @font-face Rule?

在 CSS 中匯入字型:綜合解決方案

在 CSS 中匯入字型:綜合解決方案

@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}

@font-face { 字體系列:EntezareZohoor2; src: url(Entezar2.ttf) 格式("truetype"); } .EntezarFont { 字型系列:EntezareZohoor2、B Nazanin、Tahoma!重要; }
@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#newfont {
    font-family: 'EntezareZohoor2';
}

@font-face { 字體系列:'EntezareZohoor2'; src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg'); 字體粗細:正常; 字體樣式:正常; } #新字體{ 字體系列:'EntezareZohoor2'; }
  • 在此片段中,@font-face 規則是使用以下規範正確定義的:
  • font-family:CSS 中使用的字體名稱,在本例為' EntezareZohoor2'.
  • src:字體檔案的來源,包括多種格式browsers.

font-weight 和font-style:定義字體粗細和樣式的可選屬性。

How to Properly Import Fonts in CSS using the @font-face Rule? 
此外,newfont 元素被定義為使用 'EntezareZohoor2' 字體設定其 font-family 屬性。透過遵循這些準則,使用者可以有效地在 CSS 中匯入字體並確保在客戶端電腦上正確顯示。

最新教學 更多>
  • std 命名空間內的專業化有哪些限制和允許?
    std 命名空間內的專業化有哪些限制和允許?
    std 命名空間中的專業化:限制和允許儘管能夠為std 命名空間添加明確專業化,但某些模板有明確的禁止。了解這些限制對於確保使用 std 命名空間特化的程式碼的有效性至關重要。 特化禁止的模板numeric_limits: 不允許非算術標準類型(例如, complex).shared_ptr: 必須...
    程式設計 發佈於2024-11-15
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-11-15
  • CSS 圖靈完備嗎?
    CSS 圖靈完備嗎?
    CSS 是圖靈完備的。這意味著,如果您將 CSS 視為適當的 HTML 檔案和一種使用者互動類型,則可以執行任意不可計算的功能。此外,Webkit CSS 可以對規則 110 進行編碼以證明圖靈完備性。這意味著 CSS 是一種快速、獨立於平台、圖靈完整的語言。
    程式設計 發佈於2024-11-15
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-11-15
  • Photoshop 如何在像素層級上混合兩個影像?
    Photoshop 如何在像素層級上混合兩個影像?
    Photoshop 如何混合兩個影像? Photoshop 透過執行逐像素操作(結合每個影像中的對應像素)來混合兩個影像基於指定混合模式的影像。混合模式決定如何組合兩個影像的顏色和通道以建立結果像素。 RGB 通道混合對於RGB 影像,Photoshop 使用以下巨集混合通道:ChannelBlen...
    程式設計 發佈於2024-11-15
  • 為什麼 C/C++ 中 `char*` 可以別名為 `struct*` 而反之則不行?
    為什麼 C/C++ 中 `char*` 可以別名為 `struct*` 而反之則不行?
    Char* 別名:指針的多功能性嚴格的別名規則控制著指針之間隱式別名的能力。它允許 char 指針指向任意類型的別名對象,同時限制相反的情況。這種不對稱性激發了人們的好奇心:char 如何為指向相同位置的 struct* 別名,而不是相反? 對於引用相同記憶體位址的 char 和 struct,兩者...
    程式設計 發佈於2024-11-15
  • 為什麼 std::async Future 具有阻塞析構函式?
    為什麼 std::async Future 具有阻塞析構函式?
    為什麼要阻塞:std::async 返回的Future 的阻塞析構函數背後的原因處理非同步任務時, std: :async 傳回的future 因其阻塞行為而聞名,引發了對其必要性的質疑。為了深入研究這個設計選擇,讓我們探討導致其實現的問題和討論。 Herb Sutter 的論文「async、~fu...
    程式設計 發佈於2024-11-15
  • 如何在沒有 JavaScript 的情況下實現 CSS 中 Div 元素的居中擴充?
    如何在沒有 JavaScript 的情況下實現 CSS 中 Div 元素的居中擴充?
    使用CSS 從中心擴展Div在CSS 轉換領域,人們可能會想像div 元素從其中心軸優雅地擴展,而不是從左上角和左上角展開的預設行為。然而,如果沒有 JavaScript,這種期望的效果就會帶來挑戰。 解決方案:操縱邊距實現這種居中擴展的關鍵在於使用特定的轉換 div 的邊距公式。該技術涉及計算目標...
    程式設計 發佈於2024-11-15
  • 您可以在沒有“eval”的情況下在 JavaScript 中建立運行時命名的函數嗎?
    您可以在沒有“eval”的情況下在 JavaScript 中建立運行時命名的函數嗎?
    JavaScript 中不帶Eval 的運行時命名函數是否可以創建一個JavaScript 函數,其名稱在運行時確定,而不使用eval 或非常規的引擎特定功能?是的,現在 ECMAScript 2015 (ES6) 及更高版本可以實現這一點。 ES6 解決方案:計算屬性名稱在 ES6 中,指派給物件...
    程式設計 發佈於2024-11-15
  • 如何偵錯 PDO 連線問題:為什麼我的腳本嘗試無限期連線?
    如何偵錯 PDO 連線問題:為什麼我的腳本嘗試無限期連線?
    PDO 連線測試:偵錯連線問題在為您的應用程式之一建立安裝程式的過程中,您在透過PDO 測試資料庫設定時遇到了挑戰。透過提供的程式碼片段,您發現腳本嘗試無限期地連接到資料庫,儘管明顯的連接失敗。 要修正此問題並能夠區分有效和無效的資料庫連接,您需要設定錯誤建立 PDO 連接時的模式。具體方法如下:t...
    程式設計 發佈於2024-11-15
  • 使用委託在 Kotlin 中實現 Mixins(或 Traits)
    使用委託在 Kotlin 中實現 Mixins(或 Traits)
    (Read this article in french on my website) In object-oriented programming, a Mixin is a way to add one or more predefined and autonomous functionalit...
    程式設計 發佈於2024-11-15
  • C++ 中何時透過引用或指標傳遞:指導原則?
    C++ 中何時透過引用或指標傳遞:指導原則?
    C 中透過引用或指針傳遞:指導原則在C 中,了解何時採用引用傳遞以及何時使用指針至關重要。這種做法可以產生高效且無錯誤的程式碼。 一般情況將std::string 傳遞給函數:foo(std::string *) 或foo(std::string&)?將tr1::shared_ptr 傳遞給函數:f...
    程式設計 發佈於2024-11-15
  • 是否有跨瀏覽器的 JavaScript 取代 CSS 視窗單元(vh 和 vw)?
    是否有跨瀏覽器的 JavaScript 取代 CSS 視窗單元(vh 和 vw)?
    使用JavaScript 的CSS 視口單位CSS3 引入了視口百分比長度單位vh 和vw,這對於響應式佈局非常有價值。然而,問題是這些單元是否存在跨瀏覽器 JavaScript 替代方案。 JavaScript/jQuery 替代方案當然!可以利用 jQuery 為視口單元提供替代方案。這是一個基...
    程式設計 發佈於2024-11-15
  • 如何有效防範SQL注入與跨站腳本?
    如何有效防範SQL注入與跨站腳本?
    防範SQL 注入與跨站腳本攻擊:最佳方法防範SQL 注入與跨站腳本攻擊:最佳方法對抗SQL 注入與跨站腳本(XSS) 漏洞需要全面且細緻的戰略。除了隨意採用各種清理方法之外,了解這些攻擊的性質並實施適當的措施也至關重要。 SQL 注入預防禁用魔法引號: 避免使用魔術引號,因為它們會損壞資料並混淆清理...
    程式設計 發佈於2024-11-15
  • 如何在 Next.js 13 中有效地取得資料以避免未定義的資料?
    如何在 Next.js 13 中有效地取得資料以避免未定義的資料?
    Next.js 中的資料取得障礙:解決未定義的資料Next.js 提供了多種伺服器端資料取得的方法,包括getStaticProps 和getServerSideProps 。但是,這些方法主要適用於頁面資料夾中的頁面元件。在 Next.js 13 中,出現了一個稱為伺服器元件的新概念,允許直接在元...
    程式設計 發佈於2024-11-15

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3