网页中如何使用一些特殊字体

虽然我们可以通过图片,flash、SIFR等技术来实现网页使用特殊字体,有利于SEO网页中嵌入特殊字体方法,@font-face属性。

通常网页上不能使用一些特殊字体,否则浏览者可能无法正确浏览到,虽然我们可以通过图片,flash、SIFR等技术来实现网页使用特殊字体,

但是这都有个严重的缺点:不利于SEO。

下面介绍一种非常有利于SEO的特殊字体应用方法:在CSS中通过@font-face属性来实现网页中嵌入特殊字体。

第一步、

获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。

.EOT,适用于Internet Explorer 4.0+
.TTF或.OTF,适用于Firefox 3.5、Safari、Opera
.SVG,适用于Chrome、IPhone

最常见的是.TTF文件,我们需要通过这种文件格式转换为其余两种文件格式。可以通过网站http://onlinefontconverter.com/或者

http://www.fontsquirrel.com/fontface/generator 或onlinefontconverter提供的在线字体转换服务获取字体文件格式的转换。这里推荐第

二个站点,它允许我们选择需要的字符生成字体文件(在服务的最后一个选项),这样就大大缩减了字体文件的大小,使得本方案更具实用性

第二步、

获取到三种格式的字体文件后,在样式表中声明该字体,并在需要的地方使用该字体。

字体声明如下:

@font-face {
 font-family: 'fontNameRegular';
 src: url('fontName.eot');
 src: local('fontName Regular'),
        local('fontName'),
        url('fontName.woff') format('woff'),
        url('fontName.ttf') format('truetype'),
        url('fontName.svg#fontName') format('svg');

/*其中fontName替换为你的字体名称*/
在页面中需要的地方使用该字体:
    p {font: 13px fontNameRegular, Arial, sans-serif; }
    h1{font-family: fontNameRegular}
或者
 <p style="font-family: fontNameRegular">这是你的文字内容-懒人建站</p>

 

说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念:

一、TureTpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

二、OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

三、Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

四、Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

五、SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

 

@font-face {font-family: 'MyWebFont';src: url('webfont.eot'); /* IE9 Compat Modes */src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('webfont.woff') format('woff'), /* Modern Browsers */url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

网络字体(Web font)的效率

你需要注意的是,字体文件的体积可能非常的大,而且需要额外的HTTP连接,这些都会降低网站页面的加载速度。所以,在使用网络字体@font-face前,你需要清楚它的利与弊,判断网络字体是否真的有必要用在你的网站页面上。

如果你决定使用个性化自定义字体,可以采用一个非常灵活的方法,就是只加载尽量少的字体字符数和尽量少的字体风格(粗体/斜体)。例如,如果你使用谷歌字体,你可以只加载指定的字体风格组合:

@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/400040.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Google浏览器中的开发工具.

惯例 我是温浩然: google浏览器&#xff0c;按下F12后&#xff0c;出现开发控制台。 下面有这么几栏&#xff0c;elements,network,sources,timeline ,profiles,resources,audits ,console. elements&#xff0c;是页面源码&#xff0c;network&#xff0c;是看请求的&#xff…

【思考】一次交付项目小结

【背景】 公司销售谈了一个重要的项目&#xff0c;与我们正在研发的一个产品关系比较大&#xff0c;可惜前期由于种种原因&#xff0c;耽搁了很长时间&#xff0c;等到我们研发部门知道消息的时候&#xff0c;已经很晚了。9月中旬启动&#xff0c;11月下旬要求上线&#xff0c;…

flask接收前台的form数据

html 记得访问从服务里打开 表单html 不能直接打开表单html https://www.cnblogs.com/wanghaonull/p/6340096.html

【bzoj4399】魔法少女LJJ 并查集+权值线段树合并

题目描述 在森林中见过会动的树&#xff0c;在沙漠中见过会动的仙人掌过后&#xff0c;魔法少女LJJ已经觉得自己见过世界上的所有稀奇古怪的事情了LJJ感叹道“这里真是个迷人的绿色世界,空气清新、淡雅,到处散发着醉人的奶浆味&#xff1b;小猴在枝头悠来荡去,好不自在&#xf…

树莓派Raspbian Buster/Debian 10 安装ROS

目录一些补充安装ROS初始化rosdep测试平台&#xff1a;树莓派4B 系统版本&#xff1a; 2020-05-27-raspios-buster-arm64.img 一些补充 系统安装参考 【树莓派学习笔记】一、烧录系统、(无屏幕)配置Wifi和SSH服务 【树莓派学习笔记】二、(无屏幕)SSH远程登录、图形界面及系统…

pjsip视频通信开发(上层应用)之EditText重写

我们经常使用手机的打电话功能&#xff0c;当我们按键盘的时候&#xff0c;有一个地方显示我们按键的内容&#xff0c;当我们的手点击那个地方的时候&#xff0c;并没有弹出软件盘&#xff0c;所以我们再有数字键盘的时候&#xff0c;要屏蔽系统的软件盘。 我们分析一下&#x…

JavaWeb重要知识点总结

JavaWeb学习篇之----容器Response详解http://blog.csdn.net/jiangwei0910410003/article/details/22886847获得所有请求头名称和头信息java.util.Enumeration names request.getHeaderNames();System.out.println("");while(names.hasMoreElements()){String name …

pycharm 中HTML代码的对齐

以前用sublime &#xff0c;现在django要在pycharm编辑html&#xff0c;要实现html的格式化&#xff0c; 用快捷键 CtrlAltL 非常实用

树莓派安装Ubuntu MATE及ROS系统

目录解锁SSH换源安装VNC服务安装ROS初始化rosdep和环境测试平台&#xff1a;树莓派4B 系统版本&#xff1a; ubuntu-mate-20.04.1-desktop-armhfraspi.img 在Raspberry Pi Download Options下载系统镜像 在树莓派资源下载 | 树莓派实验室下载工具 使用SDForm…

mysql 清空表的两种方法

一、Delete DELETE FROM table; 二、Truncate TRUNCATE table; 第一种方法其实就是去掉where条件&#xff0c;没有了条件&#xff0c;也就是删除掉表里面的所有记录了&#xff1b; 第二种方法像是重置表&#xff0c;把表中内容全部清除&#xff0c;回到刚建好表的状态&#xff…

jQuery学习笔记(四)

jQuery对表单、表格的操作及更多应用 表单应用 一个表单组成部分&#xff1a; 表单标签、表单域及表单按钮 单行文本框应用获取和失去焦点事件 $(function(){ $(":input").focus(function(){ //获取焦点触发事件 $(this).addClass("focus"); //增加样…

Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法

https://www.cnblogs.com/DragonFire/p/9259999.html 是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符串,用于传递到前端 STUDENT {name: Old, age:…

【Jetson Nano学习笔记】1. 系统镜像和ROS的安装

目录安装系统换源安装VNC服务安装ROS初始化rosdep和环境测试平台&#xff1a;Jetson Nano 系统版本&#xff1a;4.6.1 安装系统 在Jetson Download Center下载镜像&#xff1a; 在树莓派资源下载 | 树莓派实验室下载工具 使用SDFormatter格式化内存卡 使用balenaEtcher烧录镜…

我的Android进阶之旅------Android利用Sensor(传感器)实现水平仪功能的小例

这里介绍的水平仪&#xff0c;指的是比较传统的气泡水平仪&#xff0c;在一个透明圆盘内充满液体&#xff0c;液体中留有一个气泡&#xff0c;当一端翘起时&#xff0c;该气泡就会浮向翘起的一端。 利用方向传感器返回的第一个参数&#xff0c;实现了一个指南针小应用。我的And…

【linux命令总结】——后续用到的内容持续补充和更新

比如说&#xff1a;某个文件是go文件&#xff0c;名字叫做 Hello.go 1、通过后台运行某个程序&#xff0c;将结果输出到某个文件&#xff0c; 如果是直接运行go程序&#xff1a;go run Hello.go 后台运行&#xff1a;nohup go run Hello.go & &#xff0c;然后就会将结果输…

【Jetson Nano学习笔记】2. ORB-SLAM3及ZED 2i驱动安装

目录ZED 2i驱动安装安装驱动自测ROS测试zed2i.launchrostopic listrosnode listdisplay_zed2i.launchzed_rtabmap.launchORB-SLAM3安装OpenCV 3安装Glew安装Pangolin安装boost安装Eigen 3安装OpenGL安装openssl安装ORB-SLAM3建立swap准备编译编译关闭swap平台&#xff1a;Jetso…

给超链接(a标签)加onclick事件

<a onclick"alert(1)">超链接1</a><br> <a href"#" onclick"alert(2)">超链接2</a> <br> <a href"javascript:alert(3)">超链接3</a>

proj1088

滑雪Time Limit: 1000MS Memory Limit: 65536KTotal Submissions: 69608 Accepted: 25669Description Michael喜欢滑雪百这并不奇怪&#xff0c; 因为滑雪的确很刺激。可是为了获得速度&#xff0c;滑的区域必须向下倾斜&#xff0c;而且当你滑到坡底&#xff0c;你不得不再次走…

【Jetson Nano学习笔记】3. ORB-SLAM3运行双目Demo(ZED 2i)

目录修改zed-ros-wrapper的参数双目测试平台&#xff1a;Jetson Nano 系统版本&#xff1a;4.6.1 参考资料&#xff1a; zed-ros-wrapper —— ROS Wiki ZED 相机 && ORB-SLAM2安装环境配置与ROS下的调试 —— 李小铭 又一遍……ORB_SLAM2ZED相机(SDK2.2.1)CUDA9.0ROS…

PyCharm设置自动换行

在使用PyCharm码代码的时候&#xff0c;有些单行的代码比较长&#xff0c;经常需要手动拉动滚动条。 辣么怎么设置自动换行呢&#xff1f;&#xff1f; 敲黑板 在这里给大家介绍两种方式&#xff1a; 1、如果你需要频繁在【自动换行/非自动换行】模式中切换 那就需要设置一个顺…