公司新闻 行业动态 技术分享

网页切图中如何处理特殊字体文字

发布日期: 2017-12-15浏览次数: 464

  设计师在设计网站过程中,为了整体的效果会在局部使用特殊字体。

  不要小瞧了简单的几个字,开发的时候可是个大麻烦。为什么呢?这就要从电脑的字体说起来,主流的电脑操作系统基本是windows、Mac这2种,操作系统正常都会带有一些字体,例如我们比较熟悉的微软雅黑。

  如果网站代码里指定文字字体用微软雅黑,那么很简单电脑上都有安装,直接就能展示。

  如果代码指定使用的是电脑上没有的字体呢,这时候浏览器就无法显示这个字体。这种情况网站就必须上传指定的字体,浏览器加载后才能正常显示字体效果。

中文字体文件太大

  中文上传字体就能解决问题吗?实际的情况要更复杂,英文只有26个字母加了符号这些,字体文件往往只有几十k,一两百k大小,而中文一个文件下来好几M。

  如果多用2个字体,网站岂不是还没打开就先加载十几M的字体,显然是不能这么做的。

解决方案

1、切成图片

  涉及特殊字体的文字,只能隐藏其他图层后切成图片,以图片的形式在网页中展示。

  这个方式的缺点是文字修改都必须重新导出图片。

2、font-spider

  字蛛是一个开源中文字体压缩器,让网页自由引入中文字体成为可能。

  http://font-spider.org/

  有了这个便捷的工具,前端工程师们就可以针对个别文本导出几k大小的字体来使用,从而达到页面显示效果与网页加载速度两者间的平衡。

  唯一的缺点是因为中文字体的特性,font-spider对于大量的文本也没太大的办法,大量的文本(特别是包括的不同字越多)最终还是会导致导出的字体文件大小直线上升。

扫一扫关注我们

厦门奇站网络科技有限公司

电话:13313868605

QQ:3413772931

地址:厦门软件园三期A02

网站地图