电脑有已经安装好的字体,但是如果你有特殊需要而要选择其他字体,则需要以下几个步骤

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自定义炫酷字体的更多相关文章

  1. web前端炫酷实用的HTML5应用和jQuery插件

    又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场.下面一起来看看这些炫酷而实用的HTML5应用和jQuer ...

  2. Swift 自定义炫酷下拉刷新效果

    先来看下效果 下拉刷新 其实下拉刷新没大家想得那么难.本文已第二个为例子.给大家讲解下下拉刷新的做法(完整代码后面会放上) 首先,先搞一个single View Application .然后进Mai ...

  3. 手把手带你做一个超炫酷loading成功动画view Android自定义view

    写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾 ...

  4. CSDN 个性 博客 栏目 自定义 栏目 酷炫 音乐 视频

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 自定义 栏目 酷炫 音乐 视频 ========

  5. web报表设计器在线制作炫酷图表

    相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...

  6. hexo的next主题个性化教程:打造炫酷网站

    看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实 ...

  7. Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI

    1.概述 哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过 TabPageIndicator,并且很多知名APP都使用过这个 ...

  8. 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  9. kubernetes生态--交付prometheus监控及grafana炫酷dashboard到k8s集群

    由于docker容器的特殊性,传统的zabbix无法对k8s集群内的docker状态进行监控,所以需要使用prometheus来进行监控: 什么是Prometheus? Prometheus是由Sou ...

随机推荐

  1. Git双机同步

    如果使用git init 初始化,当客户端仓库push内容时,服务器端仓库可以看到log,但是更新的文件不能显示,必须使用git reset --hard才能更新内容

  2. TNS-12541: TNS:no listener TNS-12560: TNS:protocol adapter error TNS-00511: No listener Linux Error:

    今天是2014-06-17.遇到一个很奇怪的问题,可能之前測试改动监听的原因,导致监听启动后自己主动关闭,特此记录一下整个处理过程, 监听配置文件信息例如以下: [oracle@dg1 admin]$ ...

  3. POJ 1659 Frogs' Neighborhood

    转载请注明出处:http://blog.csdn.net/a1dark 分析:切图论切的第一道题.也是图论的例题.主要用到一个Havel-Hakimi 定理 有以下两种不合理的情形: (1) 某次对剩 ...

  4. SecureCRT 6.7.1 注冊机 和谐 破解 补丁 方法

    之前一直在用SecureCRT 6.5.3 版本号,和谐补丁也好找,甚至中文版本号也可找到(眼下仅仅找到了SecureCRT.6.2.0) 可是换为 6.7.1 后就怎么也注冊不了了.. 没办法试了各 ...

  5. php学习笔记--error

    不同的错误处理方法: 简单的die()语句 自己定义错误函数和错误触发器 错误报告 主要的错误处理:使用die()函数 if(!file_exists("welcome.txt") ...

  6. Windows7在自由的虚拟机(微软官方虚拟机)

    Windows7在自由的虚拟机(微软官方虚拟机) 前言: 不是说windows7自带的虚拟机最好用,但他的正式版.免费.只是希望你能windows7用户.它将能够自由使用: 还是Vmware. 微软为 ...

  7. 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 ...

  8. 算法战斗:给定一个号码与通配符问号W,问号代表一个随机数字。 给定的整数,得到X,和W它具有相同的长度。 问:多少整数协议W的形式和的比率X大?

    如果说: 给定一个号码与通配符问号W,问号代表一个随机数字. 给定的整数,得到X,和W它具有相同的长度. 问:多少整数协议W的形式和的比率X大? 进格公式 数据的多组,两排各数据的,W,第二行是X.它 ...

  9. 动态创建ImageView

    1.布局文件 <LinearLayout android:id="@+id/viewGroup" android:layout_width="wrap_conten ...

  10. redmine忘记username和password

    环境: Ubuntu 13.10 bitnami-redmine-2.5.1-1-linux-x64-installer.run 用bitnami安装完redmine以后,有是否忘记了username ...