资讯专栏INFORMATION COLUMN

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

justCoding / 3218人阅读

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

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

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

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

font-family: "Arista2";

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

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

点击此查看你样例

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

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

相关文章

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

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

    tianlai 评论0 收藏0
  • 迟到的中文 WebFont

    摘要:总结一下,中文首要解决的问题便是压缩与转码。现有的中文解决方案本地制作通过字体制作工具来删除没有使用的字符,即制作精简版字体,这也是我之前实践过的方案。字蛛官网项目贡献者糖饼文章出处迟到的中文 (前端工程师福音,收藏一下) 三年前,有一个设计师面试一位 Web 前端工程师,其中有一段这样的对话: 如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,...

    phodal 评论0 收藏0
  • 在线使用iconfont字体图标

    摘要:支持按字体的方式去动态调整图标大小,颜色等等。与使用方式相比,具有如下特点兼容性良好,支持,及所有现代浏览器。相比于语意明确,书写更直观。不过因为本质上还是使用的字体,所以多色图标还是不支持的。 使用阿里巴巴矢量图标库 用前准备 在线使用案例 三种使用方式介绍 vue项目(本地)使用iconfont字体图标 使用准备 进入 阿里巴巴矢量图标库 ,登陆以后,搜索需要的图标...

    FreeZinG 评论0 收藏0
  • iconfont实践小结

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

    bitkylin 评论0 收藏0
  • 博客引入漂亮字体二三事

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

    Pocher 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<