前言

如何使用网页设计指定的字体，要知道在windows系统里是没有苹方字体的，用户没有安装怎么办，我们如何安装字体，字体文件过大怎么办，怎样处理这些问题了？

一、有哪些字体文件可以使用？

TrueType (.ttf)（最常用的）
EOT – Embedded Open Type (.eot)
OpenType (.otf)
WOFF – Web Open Font Format (.woff)
SVG (Scalable Vector Graphics) Fonts (.svg)

链接详情介绍

二、在网页中如何使用？

/* 字体文件引入及声明 */
@font-face {font-family: myFirstFont;src: url(sansation_light.woff);
}/*指定字体*/
div {  font-family:myFirstFont;
}

三、怎么压缩字体文件？

使用node处理，安装font-spider,在命令行使用npm i font-spider -g全局安装font-spider
新建一个html文件，引入字体文件，声明并使用字体，我们需要使用什么字，就在页面中一一列举并使用。压缩后的字体文件，就仅包含规定的文字，从而去掉不使用的字体，减小体积

<!DOCTYPE html>
<html lang="en"><body><style>/*声明 WebFont*/@font-face {font-family: "pinghei";src: url("./STSongtiSCBlack.ttf") format("truetype");font-weight: normal;font-style: normal;}/*使用选择器指定字体*/.font-pinghei {font-family: "pinghei";}</style><pre><code class="font-pinghei">QWERTYUIOPLKJHGFDSAZXCVBNMqwertyuioplkjhgfdsazxcvbnm0123456789</code></pre></body>
</html>

在html文件目录使用命令行，使用命令 font-spider index.html，开始压缩字体文件，准确说是提取需要的字体

总结

在网页中一些banner部分的特殊字体，价格会使用的不一样的字体，但往往又不要使用整个字体文件，这个时候就需要我们进行压缩文件。一般情况不需要单独安装字体，常用汉字有3500个，加上繁体更多，一整套字体文件少说也说10mb左右，不像英文26个字母加10个数字就搞定了，太大的字体文件直接会让网页打开巨慢，得不偿失，一般页面中规定好字体就可以了，用户有没有安装随缘了。像是桌面应用或是app，可以考虑安装。

网页字体文件安装及使用相关推荐

php ttf 字体 url,window_TTF字体文件如何安装 TTF文件打不开解决方法，TTF文件是Windows系统下的字体文 - phpStudy...
TTF字体文件如何安装 TTF文件打不开解决方法 TTF文件是Windows系统下的字体文件,可通过系统自带的字体安装程序直接安装添加字体,比如常用的"仿宋_GB2312"字体就可 ...
figma：使用mac上的字体 | 转换ttc字体文件
figma:使用mac上的字体 | 转换ttc字体文件现在的主力系统是Mac,偶尔会切到Windows,打开 figma 时发现缺少字体,原来里面有mac上才有的字体,之前都是切回mac重新编辑,但 ...
VS Code字体总是安装不上，vscode字体安装
VS Code字体安装,顽固版本 tmd,Vs Code老是把l看成i或者是1急死了首先要下载字体,下载好安装对应的字体,windows字体文件一般是ttf,安装好之后这里有免费的供开发编程使用的 ...
字体文件压缩 - font-spider (字蛛)
优化加载速度, 压缩字体文件安装: npm install font-spider -g 查看版本: font-spider -v 1. 新建一个fonts文件 2. fonts下新建index. ...
怎么编程安装字体文件
发表于: 2005-04-21 13:38:26 把自己的字体文件加入字体列表,下面的代码不管用,不知道都错在哪儿? 注:1.该字体文件名与字体名称相同. 2.将字体放在windows\fonts目录 ...
Mac字体怎么安装？如何在macOS电脑导入字体文件？
在我们平时见到的广告,摄影水印,报价,专辑封面,书籍封面产品设计,签名,名片,徽标,品牌,杂志,社交媒体文案等等都是需要不同的字体来完成,想要突出你的作品风格,选择一款精美的字体是很重要的,下面让Ma ...
linux如何批量安装字体,如何快速轻松地安装许多字体文件？
问题描述我需要安装超过100种字体,所以我想知道是否有简单的方法来完成这项任务? 我知道你可以打开每一个并按下安装字体,但以这种方式安装超过100个字体将是非常time-consuming. 在我的 ...
如何获取网站字体，网站字体获取方法，网页设计字体获取，网页字体提取方法，获取网站ttf,otf,eot,woff,woff2,dfont,paf,ptb,ps,pas,t42,t11,svg字体文件
网站字体获取方法 1.进入需要获取字体的站点页面,点击F12进入网页开发者模式 2.进入F12后出现选着Network面板-->>>字体栏-->>>按F5刷新页面即 ...
linux 字体文件宋体,Linux安装中文字体_宋体
E&T: CentOS_7.4 64位; mswfonts.tar.xz; Xftp5; Xshell5; 最近在完成合同电子签署时,合同的中文参数在服务器出现中文乱码问题, 编码一致且正确, ...

网页字体文件安装及使用

文章目录

前言

一、有哪些字体文件可以使用？

二、在网页中如何使用？

三、怎么压缩字体文件？

总结

网页字体文件安装及使用相关推荐

最新文章

热门文章