CSS远程加载字体
CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的。换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了。
上网搜索了下,这个问题,其实还是有解决办法的。那就是,准备一个或几个字体文件,放置到服务器上,再用 CSS 的方法把字体加载到网页中,这样,即使用户电脑中没有某一种字体,也可以正常显示!
以微软雅黑为例,一般来说,VISTA 系统和现在的 win7 系统都自带了这种字体,但 winXP 却没有。如果网站中运用了雅黑字体,win7 系统的用户访问能够正常显示,但 winXP 系统的用户访问,就不能显示,应该是用默认的宋体代替了。
加载字体文件的 CSS 方法,看这段代码:
body {font-family:’微软雅黑’}
@font-face {
font-family:微软雅黑;
src: url(‘微软雅黑.eot’); /* IE9 Compat Modes */
src: url(‘微软雅黑.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘微软雅黑.woff’) format(‘woff’), /* Modern Browsers */
url(‘微软雅黑.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘微软雅黑.svg#微软雅黑’) format(‘svg’); /* Legacy iOS */
}
系统字体的格式是ttf的,凡是以 IE 为内核的浏览器都不支持加载外部 .ttf 格式的字体!那怎么办啊?
那就改用eot吧,那怎么样把ttf转换成eot呢。这个给大家推荐个网址:http://ttf2eot.sebastiankippe.com/
好了,现在就来测试一下吧。
@font-face
语法:
@font-face { font-family : name ; src : url( url ) ; sRules }
说明:
name : 字体名称
url : 使用绝对或相对地址指定OpenType字体
sRules : 样式表定义
设置嵌入HTML文档的字体。
嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。
示例:
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }
CSS远程加载字体的更多相关文章
- css加载字体跨域问题
刚才碰到一个css加载字体跨域问题,记录一下.站点的动态请求与静态文件请求是不同的域名的.站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com.问题:页面中加载c ...
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- webpack4加载字体
webpack加载字体,刚开始下载完字体后就用css去引用它,结果死活没显示我要的字体,后来https://www.aliyun.com/jiaocheng/654750.html这篇文章说要把下载的 ...
- Bootstrap Modal 使用remote从远程加载内容
Bootstrap的Modal这个模态窗组件还是很好用的,但在开发的过程中模态窗中的内容大部分都是从后端加载的.要实现模态窗的内容是从后端加载话,常用的实现方式有2种.它们是: (1) ...
- React-Native WebView动态加载字体
背景 使用react-native构建的iOS/Android双端APP,通过WebView加载本地页面,需要根据服务器提供的字体列表实现下载和动态加载. 本地字体检查 有些字体手机操作系统已经提供了 ...
- 关于css样式加载的问题
今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑. 我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果.(主要训练jQuer ...
- vue超简单加载字体方法,解决scss难加载字体的问题
vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...
- 如何判断css是否加载完成
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs functi ...
- IIS无法加载字体文件(*.woff,*.svg)的解决办法
在编写前端代码的过程中经常会遇到使用特定的字体(*.woff,*.svg),此时在加载字体时请求会被返回 Failed to load resource: the server responded w ...
随机推荐
- Java GC专家系列1:理解Java垃圾回收
了解Java的垃圾回收(GC)原理能给我们带来什么好处?对于软件工程师来说,满足技术好奇心可算是一个,但重要的是理解GC能帮忙我们更好的编写Java应用程序. 上面是我个人的主观的看法,但我相信熟练掌 ...
- jquery 实现页面拖拽并保存到cookie
实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...
- Android常用网址[转]
转自:http://my.oschina.net/u/593225/blog/404423 1.AndroidDevTools URL: http://www.androiddevtools.cn/ ...
- 三大框架常遇的错误:hibernate : object references an unsaved transient instance
hibernate : object references an unsaved transient instance 该错误是操作顺序的问题,比如: save或update顺序问题---比方学生表和 ...
- [RxJS] Combination operator: withLatestFrom
Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLate ...
- CodeIgniter框架url去index.php(转)
针对apache,支持mode_rewrite可以通过在目录先建立.htaccess去掉url中index.php .htaccess内容如下: RewriteEngine on RewriteCon ...
- ZFS+Dtrace+Zones+KVM=SMARTOS + dtrace 详细文档
https://smartos.org/ http://dtrace.org/guide/chp-io.html http://blog.csdn.net/babyfacer/article/deta ...
- systrace跟踪 Android性能优化
http://blog.csdn.net/oujunli/article/details/8138172 http://blog.csdn.net/oujunli/article/details/50 ...
- 进程的优先级 与 CFS 进程调度
在Linux下改变进程的优先级 作者:曾老师,华清远见嵌入式学院讲师. 作为多任务的操作系统,Linux内核为每个创建的进程分配时间片并根据其优先级进行调度.当进程被创建时,其对应的task_stru ...
- URAL 1062 - Triathlon(半平面交)
这个题乍眼一看好像很简单,然后我就认为u.v.w只要有全部比另外一个人小的就不能win,否则就能win,但是这个思路只对了一半 不能win的结论是正确的,但是win的结论不止排除这一个条件 将这个人与 ...