CSS引入本地字体与在线字体

justCoding 发布于2019-04-23 11:44 / 3363人阅读

摘要：特别提到一点，最好是不要引入特别的中文字体，主要是中文字体文件实在是太大了些，如果只是几个字完全可以做成或者的格式。

有些时候为了强调某些文字，需要使用一些比较特别的字体，CSS中现在也可以比较方便的引入字体了，如下：

/* 定义字体 */
@font-face{
  font-family: Arista2;
  src: url("./Arista2.0.ttf");
}

其中font-family就是之后使用时候的字体名称了，如此一来CSS中就可以直接使用本地的字体了，如下：

font-family: "Arista2";

如果需要引用在线字体，首先需要找到在线字体，国内推荐谷歌字体，虽然里面的中文字体不知道什么缘故无法使用，但英文字体还可以，至于详细的使用方法网站中有说明这里便不赘叙了。

特别提到一点，最好是不要引入特别的中文字体，主要是中文字体文件实在是太大了些，如果只是几个字完全可以做成svg或者png的格式。

点击此查看你样例

GPU云服务器云服务器 css字体库 css 服务器字体 html 本地字体 css3服务器端字体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1081.html

iconfont的使用方法(更新了一些内容）

摘要：方式和方式是极其相似的，只不过他们一个用的是图标的字体编码，一个用的是图标的引用而已是使用了引用的类名，可在下载的中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。字体图标iconfont阿里官网传送门： http://www.iconfont.cn/打开首页的小图标好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...

tianlai 2019-08-23 11:39 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
博客引入漂亮字体二三事

摘要：火狐推迟对字体的支持，重点放在格式上。网络字体的效率字体文件的体积可能非常的大尤其是对于汉字，而且需要额外的连接，这些都会降低网站页面的加载速度。最近兴致上来，就想更换了那Blog标题字体(汉字的)；网上搜索了一番，发现蘇新詩柳繁體这款甚合我心；然后就着手搞将了起来，分分钟也算是替换了；但，这仅仅是此次折腾的开始；这就细细道来作为学习笔记记载。原文首发链接http://www.je...

Pocher 2019-08-19 17:37 评论0 收藏0