css小知识:如何使用字体包
先看效果,图一使用了字体包,使用字体包和没有使用字体包的区别还是很大的
使用方法:
1.首先你得有字体包的文件,实在没有也可以搜索一些标准版字体可以直接用,但美观度一般,如果需要可以滴我发送源文件,文件如下图这样:
拥有文件之后,一般情况下把这个文件放在项目目录的\src\assets\fonts目录下
放好之后就可以在页面使用了
@font-face {
font-family: 'DIN-Bold';
src: url('@/assets/fonts/din-bold-2.ttf');
}
通过上面的形式声明字体,可以自定义字体名称,然后引入字体文件,接着就可以使用啦!
前端使用字体包的原因:
1. 提高可读性和美观性
-
清晰度:专门设计的字体(如 DIN、Roboto 等)通常具有更高的清晰度,尤其是在展示数字和金额时。这些字体的数字字符设计得更简洁、对齐更好,使得用户更容易阅读和理解。
-
一致性:使用统一的字体可以确保整个应用界面风格一致,提升用户体验。
2. 品牌一致性
- 视觉识别:许多公司或产品会使用特定的字体来增强品牌形象。通过在前端加载自定义字体,可以确保所有页面和组件都遵循品牌指南,保持视觉一致性。
3. 优化排版
- 字距和行距控制:自定义字体允许开发者更好地控制字距、行距等排版属性,从而优化文本的显示效果,特别是在多语言支持和响应式设计中尤为重要。
4. 特殊符号和图标
- 包含特殊字符:一些字体包可能包含特殊的符号、图标或货币符号,这些符号在默认系统字体中可能无法正确显示。例如,某些金融应用需要展示特定的货币符号或标志。
5. 跨平台兼容性
- 确保一致显示:不同操作系统和浏览器默认使用的字体可能不同,这可能导致文本显示效果不一致。通过加载自定义字体,可以确保在所有平台上都能获得一致的显示效果。
6. SEO 和性能优化
- Web 字体服务:现代 Web 字体服务(如 Google Fonts、Adobe Fonts)提供了高效的字体加载机制,可以通过子集化和压缩技术减少字体文件大小,从而提高页面加载速度。