引用网站(我们一起来学习下网页中特殊字体的引用)

在网站中,字体扮演了其中重要的一个角色,选用什么样的字体也是一个相对比较重要的工作。不同的电脑,所安装的字体不尽相同。那我们在做网站中该如何选择字体呢?图片来源于网络系统自带的字体包括:中文字体:微软雅黑、宋体、黑体;英文字体:Arial、Helvetica使用这些字体自带的字体可以高度的还原设计稿上的文字效果。我们在网站制作过程中,因页面设计所需,常常会碰到一些特殊的字体,虽然引用了,却无法在网页中显示和设计稿一样的字体。这是由于用户的电脑并没有安装这些特殊字体。这种情况下,我们可以通过以下方法让其正常显示。切成图片的方式优点:简单、快捷、方便 缺点:不易更改(需要会ps)、放大缩小会失真、不利用优化适用于不常更新的区域,如首页的标题、固定的栏目标题等。如下图“联系”两字图片来源于网络外部字体引用的方式优点:方便后期用户操作,直接更改文字即可、利于优化缺点:中文字体较大,会影响加载速度。 如下图数字图片来源于网络使用方法:1)下载所需的字体样式,格式有所区别,常用.TTF、.woff、.OTF等格式 可通过在线字体转换,将字体格式转化为我们需要的格式。 字体格式转换一: https://www.fontsquirrel.com/tools/webfont-generator字体格式转换二: https://www.fontke.com/tool/convfont/2)css中引用字体格式:@font-face {
font-family: '字体名称';
src: url('../fonts/字体名称.eot');
src: url('../fonts/字体名称.eot?#iefix') format('embedded-opentype'),
url('../fonts/字体名称.woff2') format('woff2'), url('../fonts/字体名称.woff') format('woff'),
url('../fonts/字体名称.svg#字体名称') format('svg'); font-weight: normal; font-style: normal;
}3)引用:
.num {
font-family: 字体名称;
}由于中文字体体积较大,预览下载需要一定的时间,打开会比较慢,英文字体体积本身比较小,不存在这样的问题。

本文出自快速备案,转载时请注明出处及相应链接。

本文永久链接: https://www.175ku.com/34309.html