@font-face

Web中的可变字体

Web排版和传统的印刷排版之间的差距不是一点点,而且Web排版一直以来都令Web开发者感到头痛,由其是Web中的字体。或许你在平时开发Web页面或Web应用的时候已经发现在Web上需要渲染一些更具艺术风格的字体,或者希望在响应式Web排版的设计中让文字能根据断点做出相应的响应等。虽然通过一些技术手段可以实现类似的效果,但同时也会造成许多新的问题产生。幸运的是,2015年开始推出了OpenType字体格式,以一些非常显著的方式改变了开发者面临的实际困难。他们有能力在较小的文件下为Web带来更丰富的排版性,但随着新的可能性和优势,新的挑战和复杂性也随之出现。那么,OpenType字体的引入之后会给Web带来什么样的变化?我们又应该在Web中怎么使用?接下来,我们一起来探讨这方面的话题。

@font-face的困境

最近在互联风上有关于Web字体的性能表现讨论的越来越多。自定义的Web字体使用虽然还在持续增长,但是没有过多的人考虑其实际性能。基本的@font-face使用方法至使用户加载字体受到阻塞。我去了解了@font-face以及寻找问题所在,并且探索改善字体加载性能,使使用Web字体的性能更好,加载字体更流畅。

Inline SVG vs Icon Fonts

当你为一个网站建一套图标系统的时候,你有几种选择。如果你知道图标需要是像素画图片的时候,你可能会用到css sprites也就是雪碧.而如果图标需要是矢量图的时候(现在已越来越普遍),你有两种选择,他们是ƒsvg图标字体

如何制作自己的网页字体图标

网页字体图标到现在来说并不是一个新话题,大家都知道是通过@font-face来实现的。虽然有很多地方介绍如何制作属于自己的网页字体图标,但大部分都还是需要收费。让你我们这等屌丝无法接受。除了这些之外,其实还有一些制作矢量图的软件可以实现自己的图标。在这篇译文中,就详细介绍了如何使用Inkscape软件制作出自己的网页字体图标。

响应式网页字体图标

响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面,不仅仅是针对于物理尺寸,而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下,都是通过内联块元素<img>标签来添加图标。另一种常见的技术是依赖于网格图标和状态——CSS Sprites,并将其保存为.gif.png文件。然而,更糟糕的是图片根据响应式内容不断的放大,对于位图图像会产生锯齿,而且会越明显。更糟糕的是,CSS Sprites(雪碧图)制作的图标更无法轻意的缩放。

Sass制作Font Awesome图标

Font AwesomeDave Gandy通过字体制作的几百个icons图标。在前端界享有盛名。使用@font-face制作的图标可以随意的放大,并通过CSS中字体相关的CSS对图标进行美化,比如说可以改变图标颜色、大小和增加阴影等,但他也存在一定的弊端。为了使用部分图标,不得不加载所有图标的样式。如果你使用Sass将可以改变这一切,今天这篇文章就是介绍了Sass如何通过几个Mixins和Function等特性来实现按需开启需要的图标。

为什么要用和如何使用字体图标

图片是有诸多优点的,然而目前在网站设计这行业面临各种各样的挑战。图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”,因此,有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。由于位图给Web制作带这诸多的不便,为了解决这些问题,CSS3给大家带来一个新的属性@font-face。

使用@font-face制作图标已不是什么秘密,也不是什么新技术,在互联网上这样的教程铺天盖地。但是我们依然给大家介绍一篇@font-face制作图标的教程。这篇教程主要向大家阐述了”为什么要用和如何使用字体制作图标“,从教程中,你可以找到@font-face制作图标的优势与不足,同时也能找到要如何得到制作图标的字体。

如何把你的图标转换成web字体

使用@font-face运用本地字体,制作一些特殊的字体效果非常方便,特别是使用@font-face制作图标,更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体,这样一来就有很多同学在问,如何制作自己需要的字体呢?或者说如何将自己需要的图标转换成自己需要字体,在运用到web页面中?这个问题问得很好,其实实现思路并不复杂,我们需要通过一些适量图的软件,绘制出矢量图标,然后通过一定的工具将这些图标转换成需要的字体。或许你会说,这不是废话,还是没有谈到怎么做出来。大家不用着急,根据Martin Gittins的《How to turn your icons into a web font》文章介绍,你只需要一款制作矢量图的应用软件,和一个免费的Web应用程序IcoMoon将矢量图转换成Web字体工具就可以轻松的帮你实现。如果你不信,不仿往下看,我想你看后,以后再也不会使用位图了。(^_^)

自定义Font Icon

前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3@font-face来制作Icon图标。现在在网上最为流行的是@robmadole@supercodepoet两位大师制作的Font Awesome

@font-face制作Web Icon

@font-faceCSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上,不过这样一来很多人担心影响性能问题。鱼和熊掌不能兼得嘛,我们就不在为这个问题说太多的话了,不过我今天要与大家分享的主题和这个@font-face还是有很在关系的,使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际,以前的Icon都是依靠图片来完成,怎么可能用字体就能实现呢?如果你以前有用过HTML的实体符,我想就不会那么惊奇了。

页面

返回顶部