您的位置: 首页  >  文章  >  前端中的网页中的字体如何实现

前端中的网页中的字体如何实现

分类: 文章 • 2024-02-19 16:46:34

前端中的网页中的字体如何实现
比如：
前端中的网页中的字体如何实现
这种的字体想在网页中实现的方法有两种：
实现网页字体不同建议不推荐关于兼容性还有加载和占内存
1.采用在线字体的网址
在线的网址可以推荐：
https://www.youziku.com/onlinefont/index
该网站的中文字体一部分是免费的，可以运用到自己的网页当中，网址中有清晰的引用步骤
2.采用本地上传字体包
提示：1.（不太推荐）因为体积太，会影响加载速度
2.对于有时候ui只给一个tf格式的字体文件，然而tf格式的文件只适合用于一部分的浏览器，所以得找相应转字体格式的网址去转格式，但是生成的文件比较大

https://www.cnblogs.com/fjdingsd/p/5663561.html(比较详细)
在前端页面中使用@font-face来显示web自定义字体【转】
主要的话是：
给大家提供几个免费字体下载的网址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体，但下面这个工具作用更是无穷的大，他能帮你生成@font-face所需要的各种字体，这工具就是Font Squirrel。

字体包http://font.chinaz.com/161028349920.htm

首先获取要使用字体的三种文件格式.EOT、.TTF或.OTF、.SVG，确保能在主流浏览器中都能正常显示该字体。

.EOT，适用于Internet Explorer 4.0+
.TTF或.OTF，适用于Firefox 3.5、Safari、Opera
.SVG，适用于Chrome、IPhone

声明

@font-face {
font-family: ‘newFont’;
src: url(‘fontName.eot’);
src: local(‘fontName Regular’),
local(‘fontName’),
url(‘fontName.woff’) format(‘woff’),
url(‘fontName.ttf’) format(‘truetype’),
url(‘fontName.svg#fontName’) format(‘svg’);
}
调用

p{font-family: newFont}

在线转换字体格式
https://www.fontke.com/tool/fontface/

可以到我的github中去下载相应的demo
https://github.com/architectUser/test-example/tree/master/%E5%AD%97%E4%BD%93%E5%BA%93%E7%9A%84%E8%B5%84%E6%96%99

相关推荐