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

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. SQLiteDatabase和Contentprovider

    SQLiteDatabase和Contentprovider这两个数据库,我一般是用前面一个,喜欢它的操作数据库的语句,简单明了,可惜有时遇到数据库同步的问题,有时我们需要在一个数据库下建立多个表,多 ...

  2. leetcode第一刷_Convert Sorted List to Binary Search Tree

    好,二叉搜索树粉末登场,有关他的问题有这么几个,给你一个n,如何求全部的n个节点的二叉搜索树个数?能不能把全部的这些二叉搜索树打印出来? 这道题倒不用考虑这么多,直接转即可了,我用的思想是分治,每次找 ...

  3. HDU 2828 DLX搜索

    Lamp Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. 初窥Linux 之 文件权限

    一.用户与用户组 为了更好地理解文件权限,我们需要先有用户和用户组的概念.因为在Linux里面,任何一个文件都具有“User(用户).Group(用户组)及Others(其他用户)”3种身份的个别权限 ...

  5. NET MVC运行机制

    [图解ASP.NET MVC运行机制理解-简易版]   很多盆友咨询ASP.NET MVC的机制.网上也有好多.但是都是相当深奥.看的云里雾里的.我今天抽空,整理个简易版本.把处理流程走一遍. 当然, ...

  6. swift 学习资源 大集合

    今天看到一个swift学习网站,其中我们收集了大量的学习资源 Swift 介绍 Swift 介绍 来自 Apple 官方 Swift 简单介绍 (@peng_gong) 一篇不错的中文简单介绍 [译] ...

  7. Android---App Widget(五)

    尺寸调整指南 当一个Widget被锁屏所持有时,Android框架会忽略minWidth.minHeight.minResizeWidth和minResizeHeight属性字段.如果该Widget同 ...

  8. MIT 操作系统实验 MIT JOS lab2

    MIT JOS lab2 首先把内存分布理清楚,由/boot/main.c可知这里把kernel的img的ELF header读入到物理地址0x10000处 这里能够回想JOS lab1的一个小问.当 ...

  9. adodb.RecordSet的属性和方法

    为了更精确地跟踪数据,要用RecordSet组件创建包括数据的游标,游标就是储存在内存中的数据: rs = Server.CreateObject("ADODB.RecordSet" ...

  10. Android TextView里直接显示图片的三种方法

    方法一:重写TextView的onDraw方法,也挺直观就是不太好控制显示完图片后再显示字体所占空间的位置关系.一般假设字体是在图片上重叠的推荐这样写.时间关系,这个不付源代码了. 方法二:利用Tex ...