当前位置：网站首页 > 技术文章 > 正文

我们一起来学习下网页中特殊字体的引用

myzbx 2024-12-03 16:37 19 浏览

在网站中，字体扮演了其中重要的一个角色，选用什么样的字体也是一个相对比较重要的工作。不同的电脑，所安装的字体不尽相同。那我们在做网站中该如何选择字体呢？

系统自带的字体包括：

中文字体：微软雅黑、宋体、黑体；
英文字体：Arial、Helvetica

使用这些字体自带的字体可以高度的还原设计稿上的文字效果。

我们在网站制作过程中，因页面设计所需，常常会碰到一些特殊的字体，虽然引用了，却无法在网页中显示和设计稿一样的字体。这是由于用户的电脑并没有安装这些特殊字体。

这种情况下，我们可以通过以下方法让其正常显示。

切成图片的方式

优点：简单、快捷、方便
缺点：不易更改（需要会ps）、放大缩小会失真、不利用优化
适用于不常更新的区域，如首页的标题、固定的栏目标题等。
如下图“联系”两字

外部字体引用的方式

优点：方便后期用户操作，直接更改文字即可、利于优化
缺点：中文字体较大，会影响加载速度。
如下图数字

使用方法：

1）下载所需的字体样式，格式有所区别，常用.TTF、.woff、.OTF等格式

可通过在线字体转换，将字体格式转化为我们需要的格式。

字体格式转换一：

https://www.fontsquirrel.com/tools/webfont-generator

字体格式转换二：

https://www.fontke.com/tool/convfont/

2）css中引用字体格式：

@font-face { 
  font-family: '字体名称'; 
  src: url('../fonts/字体名称.eot'); 
  src: url('../fonts/字体名称.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/字体名称.woff2') format('woff2'), url('../fonts/字体名称.woff') format('woff'), 
  url('../fonts/字体名称.svg#字体名称') format('svg'); font-weight: normal; font-style: normal; 
}

3）引用：


.num {
        font-family: 字体名称；
}

由于中文字体体积较大，预览下载需要一定的时间，打开会比较慢，英文字体体积本身比较小，不存在这样的问题。

HTML 引用

上一篇：JavaScript代码的三种引入方式【操作演示】
下一篇：一文带你解读?JavaScript的引用类型和函数对象

我们一起来学习下网页中特殊字体的引用

系统自带的字体包括：

切成图片的方式

外部字体引用的方式

使用方法：

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」