CSS使用自己的字体
要在CSS中使用自己的字体,你需要使用@font-face
规则。这允许你指定字体的名称以及从何处加载字体文件。以下是一个简单的例子:
- 首先,确保你有字体的许可使用权,并且你有字体文件的版权。
- 把字体文件放在你的网站目录中,或者使用在线字体服务(如Google Fonts)的链接。
- 在CSS文件中,使用
@font-face
声明你的字体。
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff'),
url('mycustomfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
在这个例子中,MyCustomFont
是你声明的字体名称,mycustomfont.woff2
、mycustomfont.woff
和mycustomfont.ttf
是字体文件的路径。font-style
和font-weight
可以根据需要进行调整,font-display
属性可以在字体下载完成前使用系统字体。
确保提供多种格式的字体文件以保证兼容性,这里使用了最常见的三种格式:WOFF2、WOFF和TrueType。
评论已关闭