css引入本地电脑、服务器字体

本文链接：https://blog.csdn.net/Bonjours/article/details/103680849

@font-face {
    font-family: 'DINProRegular';
    src: url('../fonts/DINProRegular/DINProRegular.eot');
    src: url('../fonts/fonts/DINProRegular/DINProRegular.eot') format('embedded-opentype'),
         url('../fonts/DINProRegular/DINProRegular.woff2') format('woff2'),
         url('../fonts/DINProRegular/DINProRegular.woff') format('woff'),
         url('../fonts/DINProRegular/DINProRegular.ttf') format('truetype'),
         url('../fonts/DINProRegular/DINProRegular.svg#DINProRegular') format('svg');
}
@font-face {
    font-family: 'DINProMedium';
    src: url('../fonts/DINProMedium/DINPro-Medium.eot');
    src: url('../fonts/DINProMedium/DINPro-Medium.eot') format('embedded-opentype'),
         url('../fonts/DINProMedium/DINPro-Medium.woff2') format('woff2'),
         url('../fonts/DINProMedium/DINPro-Medium.woff') format('woff'),
         url('../fonts/DINProMedium/DINPro-Medium.ttf') format('truetype'),
         url('../fonts/DINProMedium/DINPro-Medium.svg#DINProMedium') format('svg');
}
@font-face {
    font-family: 'DINProBold';
    src: url('../fonts/DINProBold/DINPro-Bold.eot');
    src: url('../fonts/DINProBold/DINPro-Bold.eot') format('embedded-opentype'),
         url('../fonts/DINProBold/DINPro-Bold.woff2') format('woff2'),
         url('../fonts/DINProBold/DINPro-Bold.woff') format('woff'),
         url('../fonts/DINProBold/DINPro-Bold.ttf') format('truetype'),
         url('../fonts/DINProBold/DINPro-Bold.svg#DINPro-Bold') format('svg');
}

.DINProRegular{ font-family: "DINProRegular" }
.DINProMedium{ font-family: "DINProMedium" }
.DINProBold{ font-family: "DINProBold" }

注意：

1、项目文件夹下必须有fonts字体文件夹或者对应的字体

2、字体文件必须转换为以下几种格式，

有在线字体转换器：

https://everythingfonts.com/font-face

这个网站可以在线转，转完还有代码可复制

3、如果觉得字体加载慢，有好用的字体压缩网站“字蛛”

http://font-spider.org/