web自定义炫酷字体
电脑有已经安装好的字体,但是如果你有特殊需要而要选择其他字体,则需要以下几个步骤
1、寻找适合你的字体
有下面几个站点提供字体下载:
www.theleagueofmoveabletype.com
www.exljbris.com
www.fontex.org
http://openfontlibrary.org
www.fontsquirrel.com
www.google.com/webfonts
2、字体有多种格式,不同浏览器支持也不一样
.eot 这个字体只适合IE浏览器,如果你只有.woff字体,为了让IE也可以显示改字体,可以通过站点
www.fontsquirrel.com/fontface/generator生成不同后缀的字体。
.ttf(True Type and open Type) 这个字体支持的设备比较广泛:IE 9 and later, Firefox, Chrome, Safari, Opera,
iOS Safari (version 4.2 and later), Android, and the Blackberry Browser
.woff 这个是一个新的字体格式,为web量身订做,这通常是.ttf格式的压缩版本,所以体积更小,下载更快,支持的浏览器包括: IE 9 and later, Firefox, Chrome, Safari, Opera,
Blackberry browser, and iOS Safari version 5 and later,但是android是不支持该字体的。
.svg Internet Explorer 和 Firefox都不支持该字体,体积是其他字体的两倍大,唯一的优点是支持老版本的Safari4.1我这更早的版本。
3、初始化改字体
将.eot、.ttf、.woff、.svg字体都放到同一个目录下 ,譬如 webfonts目录,譬如我在这个站点下载了一个字体 https://www.theleagueofmoveabletype.com/linden-hill
在style里声明改字体:
@font-face {
font-family: 'LindenHill';
src: url('webfonts/LindenHill-Italic-webfont.eot');
src: url('webfonts/LindenHill-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('webfonts/LindenHill-Italic-webfont.woff') format('woff'),
url('webfonts/LindenHill-Italic-webfont.ttf') format('truetype'),
url('webfonts/LindenHill-Italic-webfont.svg') format('svg');
}
写这么多字体格式的目的你懂得,支持多种浏览器。
4、使用该字体
.main p {
color: #616161;
font-family: LindenHill, Baskerville, serif;
font-size: 1.1em;
line-height: 150%;
margin-bottom: 10px;
margin-left: 80px;
}
font-family里的LindenHill即为要使用的字体。
截图如下:
web自定义炫酷字体的更多相关文章
- web前端炫酷实用的HTML5应用和jQuery插件
又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场.下面一起来看看这些炫酷而实用的HTML5应用和jQuer ...
- Swift 自定义炫酷下拉刷新效果
先来看下效果 下拉刷新 其实下拉刷新没大家想得那么难.本文已第二个为例子.给大家讲解下下拉刷新的做法(完整代码后面会放上) 首先,先搞一个single View Application .然后进Mai ...
- 手把手带你做一个超炫酷loading成功动画view Android自定义view
写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾 ...
- CSDN 个性 博客 栏目 自定义 栏目 酷炫 音乐 视频
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 自定义 栏目 酷炫 音乐 视频 ========
- web报表设计器在线制作炫酷图表
相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...
- hexo的next主题个性化教程:打造炫酷网站
看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实 ...
- Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
1.概述 哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过 TabPageIndicator,并且很多知名APP都使用过这个 ...
- 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈
本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...
- kubernetes生态--交付prometheus监控及grafana炫酷dashboard到k8s集群
由于docker容器的特殊性,传统的zabbix无法对k8s集群内的docker状态进行监控,所以需要使用prometheus来进行监控: 什么是Prometheus? Prometheus是由Sou ...
随机推荐
- Git双机同步
如果使用git init 初始化,当客户端仓库push内容时,服务器端仓库可以看到log,但是更新的文件不能显示,必须使用git reset --hard才能更新内容
- TNS-12541: TNS:no listener TNS-12560: TNS:protocol adapter error TNS-00511: No listener Linux Error:
今天是2014-06-17.遇到一个很奇怪的问题,可能之前測试改动监听的原因,导致监听启动后自己主动关闭,特此记录一下整个处理过程, 监听配置文件信息例如以下: [oracle@dg1 admin]$ ...
- POJ 1659 Frogs' Neighborhood
转载请注明出处:http://blog.csdn.net/a1dark 分析:切图论切的第一道题.也是图论的例题.主要用到一个Havel-Hakimi 定理 有以下两种不合理的情形: (1) 某次对剩 ...
- SecureCRT 6.7.1 注冊机 和谐 破解 补丁 方法
之前一直在用SecureCRT 6.5.3 版本号,和谐补丁也好找,甚至中文版本号也可找到(眼下仅仅找到了SecureCRT.6.2.0) 可是换为 6.7.1 后就怎么也注冊不了了.. 没办法试了各 ...
- php学习笔记--error
不同的错误处理方法: 简单的die()语句 自己定义错误函数和错误触发器 错误报告 主要的错误处理:使用die()函数 if(!file_exists("welcome.txt") ...
- Windows7在自由的虚拟机(微软官方虚拟机)
Windows7在自由的虚拟机(微软官方虚拟机) 前言: 不是说windows7自带的虚拟机最好用,但他的正式版.免费.只是希望你能windows7用户.它将能够自由使用: 还是Vmware. 微软为 ...
- OGG-01008 Extract displays Discarding bad record (discard recs=1) when using filter or where clause
因为在extract參数文件里使用了where语句,而where后面的的条件列又不是主键,没有为update.delete操作记录日志,因此会报1008错误. Applies to: Oracle G ...
- 算法战斗:给定一个号码与通配符问号W,问号代表一个随机数字。 给定的整数,得到X,和W它具有相同的长度。 问:多少整数协议W的形式和的比率X大?
如果说: 给定一个号码与通配符问号W,问号代表一个随机数字. 给定的整数,得到X,和W它具有相同的长度. 问:多少整数协议W的形式和的比率X大? 进格公式 数据的多组,两排各数据的,W,第二行是X.它 ...
- 动态创建ImageView
1.布局文件 <LinearLayout android:id="@+id/viewGroup" android:layout_width="wrap_conten ...
- redmine忘记username和password
环境: Ubuntu 13.10 bitnami-redmine-2.5.1-1-linux-x64-installer.run 用bitnami安装完redmine以后,有是否忘记了username ...