网站建设观点资讯

探知 • 创造美好

不断超越客户的期望值,源自我们对这个行业的热爱

企业网站建设设计中网页如何自定义字体

来源:网站建设 - 远策科技 | 2019-03-26 10:21:52

对于企业网站内容展示型的网页,要让用户浏览时体验效果好、印象深刻,除了设计师发挥创造力之外,也需要程序员高效率的代码支持。在大多数情况我们看到网站中字体都是是宋体、微软雅黑、苹方字体等,只要操作系统里有的字体,网页上都可以呈现其效果。但总有些标新立异的设计,字体风格异类,需全网站自定义字体。在操作系统还不存在该字体的情况,其实也有办法实现。

企业网站建设字体设计
 
首先我们网页中字体的格式一般为:TTF、OTF、WOFF、EOT、SVG。
 
TTF
TrueType的主要强项在于它能给开发者提供关于字体显示、不同字体大小的像素级显示等的高级控制。TrueType是由美国苹果公司和微软公司共同开发的一种电脑轮廓字体(曲线描边字)类型标准。这种类型字体文件的扩展名是.ttf,类型代码是tfil。
 
OTF
OpenType,是一种可缩放字体(scalable font)电脑字体类型,采用PostScript格式,是美国微软公司与Adobe公司联合开发,用来替代TrueType字体的新字体。这类字体的文件扩展名有.otf、.ttf、.ttc,类型代码是OTTO,现行标准为OpenType 1.8.2。
 
 
WOFF
WOFF (网页开放字体格式) 是由 Mozilla 与 Type Supply, LettError 及其他组织协同开发的一种新的网页字体格式。它使用了一种压缩版本,类似于 TrueType, OpenType, Open Font 所采用的 SFNT 结构,不过还添加了共用数据及用户私有数据结构,其中包括了自定义空间,其允许厂家和经销商提供许可证。
 
EOT
嵌入式OpenType字体(英语:Embedded OpenType,简称EOT)是被微软设计用来在网页使用的字体格式。该字体格式是OpenType字体的压缩格式。文件的扩展名通常是".eot"。
通过使用微软的网页字体工具(WETF)、其他版权软件或者开源软件,并且基于的存在的TrueType字体文件,这种字体文件也能够被制作。
 
SVG
SVG (Scalable Vector Graphics font) 字体格式使用 SVG 的字体元素定义。这些字体包含作为标准 SVG 元素和属性的字形轮廓,就像它们是 SVG 映像中的单个矢量对象一样。SVG 字体最大的缺点是缺少字体提示(font-hinting)。字体提示是渲染小字体时为了质量和清晰度额外嵌入的信息。同时,SVG 对文本(body text)支持并不是特别好。因为 SVG 的文本选择(text selection)目前在 Safari、Safari Mobile 和 Chrome 的一些版本上完全崩坏,所以你不能选择单个字符、单词或任何自定义选项,你只能选择整行或段落文本。
 
目前主流的浏览器几乎都支持 WOFF。我们可以通过以下三步,轻松实现网站建设中网页字体的自定义。
1.创建项目自定义字体目录,导入字体。
2.CSS中定义字体。采用一个叫做@font-face 的CSS @规则 ,它允许网页开发者为其网页指定在线字体。 通过这种@font-face自定义字体的方式, 可以消除网页对用户电脑本地字体的依赖。
3.CSS引用自定义字体。根据开发者自身场景需求,可以全局引用,也可以局部标签样式引用。
 
最后,如果对于一些字体没有WOFF格式,我们可以采用字体转换的办法,有很多开放的在线转换工具供选择,这个自己搜索一下 OTF到WOFF转换器 或 在线字体转换工具 即可。

远策科技,致力于企业品牌建设和推广

微信扫码 或 加 Q 82860137 咨询
在线咨询 暂不需要

131-1155-0088