CSS 是網頁設計中常用的樣式語言,功能強大并且易于使用。當我們需要在網頁中使用自定義字體時,就需要引入本地字體文件。下面介紹幾種引入本地字體的方法。
方法一:使用 @font-face
@font-face { font-family: 'example'; src: url('example.eot'); src: local('example'), url('example.woff') format('woff'), url('example.ttf') format('truetype'), url('example.svg#example') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'example', sans-serif; }
上面代碼中,@font-face 定義了一個自定義字體,包括字體名稱和字體文件路徑。多個路徑使用逗號分隔,并且按照優先級排列。在 body 中使用 font-family 屬性來應用該字體。
方法二:使用 link 標簽
另一種方法是使用 link 標簽,將字體文件引入 HTML 文件中:
在上面的代碼中,link 標簽指向一個包含字體文件路徑的 CSS 文件。在 CSS 中定義了 font-family 屬性,將該字體應用于 body 元素。
方法三:使用 @import
還可以使用 @import 方法,將字體文件通過 CSS 文件引入:
@import url('example.css'); body { font-family: 'example', sans-serif; }
在上面的代碼中,@import 引入了一個包含字體文件路徑的 CSS 文件。在 body 元素中定義了 font-family 屬性,將該字體應用于頁面中的文本。
以上是三種常用的引入本地字體的方法。根據實際需要,選擇適合自己的方法即可。