INSIGHTS & SHARING / 观点与分享

如何在网站制作中使用特殊字体

网站建设 阅读 883

对于网站制作公司的前端老手来说,为了保证展示效果,不得不长期使用“安全字体”。英文网址永远是Verdana,中文网址永远是Songti ——,因为这是每台浏览网页的电脑必备的。安装的字体。

网站制作如何使用特殊字体

这是设计理念不断完善的UI老师所不能容忍的。字体是页面效果的基础。就像给模特换衣服走秀,却只能用一两个模特(对中国用户来说,几乎只有一种宋体)?如何在网页上应用丰富的字体效果?特殊字体应用方案目前方案无非三种:

1. 客户打开网页,提示客户安装字体。

2.将图片嵌入网页。

3、将字体嵌入网页(通过上传字体文件到指定目录,让CSS引用显示)。

第一种方案显然有缺点,使用脚本程序来识别客户端是否包含字体,增加了程序的负载。并严重影响用户体验。最有效!

第二种方案生成图片,网页加载慢,不利于百度收录,效果差!

第三种方案流量小,加载速度快,效果最好!

第三种解决方案是指网页字体(web fonts,也称为“网络字体”或“网络字体”),可以通过将字体文件上传到指定目录,然后在CSS中以指定格式引用来使用。字体效果跃入你的页面,让网页文字不再受浏览客户端的影响。网络字体与浏览器支持

Web 字体是通过CSS 中的@font-face 语句实现的。一般认为网页字体是CSS3中的一个模块。其实早在CSS2的时候就已经存在了,甚至老式的IE6甚至IE4都支持它们。其他浏览器包括手机浏览器也完美支持(如IE、360、搜狗、Firefox、chrome、safari、Opera等)。网络字体使用方法

各种浏览器都支持@font-face 声明,但嵌入的字体文件是分开的。要想所有浏览器都能正常显示,就得准备各种嵌入格式的字体文件(.eot、woff、svg、ttf)。

字体可以上传到FontSquirrel,所有需要的格式都会自动生成。然后将文件上传到空间,然后按照@font-face声明的规范进行引用。

中文网页字体的使用方法

注意中文字体,因为中文字体不同于英文。一套中文字体一般是4-6M。如果整套嵌入,没有多少浏览者会耐心等待字体加载完毕,加载前关闭页面。

所以需要提前截取中文字体,根据文章内容涉及的字词,将截取的小字体嵌入使用即可。

没错,中文确实是太麻烦了,这也是为什么英文网页上使用了那么多网页字体,却很少遇到中文的原因。第三方平台简易操作

准备各种格式的文件太麻烦了,尤其是中文,需要截取小字体。

没有专业的工具很难实现,但是不用担心,借助第三方平台,这一切都轻而易举。

现在有一些很棒的平台。如英文typekit、fontdeck、google font等,以及中文“youziku.com”等,都可以大大方便网页字体的使用。有字库主要针对中文网络字体引用,使用方法主要有两种:

1.javascript方法

选择字体后,网站将为您提供一个javascript 脚本。不需要提交文章,导入前后脚本即可。脚本会根据当前文章的内容自动生成各种格式的字体文件,嵌入到当前页面中。

2. CSS方式

选择字体后,需要提交文章内容。网站会将文章内容截取到一个小型字体库中,自动生成各种格式(.eot、woff、svg、ttf)的字体文件,并返回一个由css文件标签引用的Link,你只需要将这个Link标签引入到页面的head标签中,最后别忘了在引用网页字体的标签上设置class。

本文来自推来客官网,转载请注明原文地址:
https://www.99hyw.cn/web/13000.html

NINE REASONS TO CHOOSE US

选择推来客,九大优势

从开发效果到后续服务,
把每一份信任,落到实处。

01 / 效果

效果做到满意为止

认真打磨每一个细节,用实际效果回应您的期待。

02 / 价值

高性价比

让投入回到业务价值,兼顾品质、功能与开发成本。

03 / 技术

专业技术团队

理解业务需求,以专业技术推进项目落地。

04 / 经验

10年+运营经验

长期深耕开发与运营,让经验成为项目的底气。

05 / 积累

成品项目多

丰富的项目积累,为不同场景提供更多成熟参考。

06 / 费用

无任何增加费用

费用明晰透明,合作过程清楚放心。

07 / 口碑

行业良好的口碑

用交付与服务积累认可,珍惜每一次客户推荐。

08 / 售后

完善的售后机制

项目交付后持续提供服务,让系统使用更安心。

09 / 交付

源码交付,自主掌握

项目源码完整交付,后续维护与迭代自主掌握。

我们的服务

软件系统开发

围绕业务流程,提供软件系统设计与开发服务。

小程序开发

结合使用场景,提供小程序设计与功能开发服务。

高端网站建设

结合品牌展示与业务需求,提供网站设计与建设服务。

物联网 / API 对接

连接设备与业务系统,提供接口集成与数据对接服务。

SELECTED WORK

推荐案例,让想法落地

更多项目案例

在线客服

扫码联系客服

3985758

回到顶部