1.WEB字体可以使用一系列文件类型,下面介绍三种字体类型:

(1)内嵌OpenType

(2)TrueType和OpenType台式机使用的标准字体文件类型

(3)WEB开放字体格式。

2.构造子集:节省页面重量的一种方法是构造子集,构造子集是通过仅包含确定使用字符削减实际字体大小的方法。

3.在网站上使用Web字体有两种方式:自托管和Web字体服务。

(1)自托管Web字体来源于你自己的服务器,就像其他的资源一样。如果需要与字体相关的花费也是一次性的购买支出。

(2)Web字体服务:通常提供订购Web字体的方法。这种方式是按月或年支付使用字体的版权费用而不是彻底的买断字体。

4.使用Web字体设置文本样式:

(1)从下载的ZIP文件中的web fonts文件夹找到stylesheet.css文件。

(2)为常规文本准备的@font-face样式规则复制到你自己的样式中

(3)将字体文件复制到包含你样式表的文件夹中。

(4)对font-family进行重命名,让该名称成为字体的代号。

(5)使用你最熟悉的方法,创建为文本元素添加样式的规则。为应用Web字体,在样式规则中输入font-f:‘web font name’;其中的web font name是上一步骤创建的名字。

5.为Web字体应用斜体步骤:

(1)从下载的ZIP文件中的web fonts文件夹找到stylesheet.css文件。

(2)为常规文本准备的@font-face样式规则复制到你自己的样式中

(3)将斜体字体文件复制到包含你样式表的文件夹中。

(4)对font-family进行重命名,让该名称成为字体的代号。

(5)将斜体文本@font-face样式规则中的font-style值改为font-style:italic。

6.为Web应用粗体步骤:

(1)从下载的ZIP文件中的web fonts文件夹找到stylesheet.css文件。

(2)为常规文本准备的@font-face样式规则复制到你自己的样式中

(3)将斜体字体文件复制到包含你样式表的文件夹中。

(4)对粗体文本@font-face样式规则中的font-family值进行重命名,使之与针对常规文本的样式规则中的名称保持一致。

(5)将粗体文本@font-face样式规则中的font-weight值改为font-weight:bold。

7.为Web字体应用粗斜体的步骤:

(1)从下载的ZIP文件中的web fonts文件夹找到stylesheet.css文件。

(2)为常规文本准备的@font-face样式规则复制到你自己的样式中

(3)将斜体字体文件复制到包含你样式表的文件夹中。

(4)对粗斜体文本@font-face样式规则中的font-family值进行重命名,使之与针对常规文本的样式规则中的名称保持一致。

(5)将粗体文本@font-face样式规则中的font-weight值改为font-weight:bold,同时将斜体文本@font-face样式规则中的font-style值改为font-style:italic。

十三章:使用WEB字体的更多相关文章

  1. JavaScript高级程序设计:第十三章

    第十三章 一.理解事件流 事件流描述的是从页面中接收事件的顺序. 1.事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.以下面的HTML页面为例: ...

  2. CSS3秘笈:第十二章&第十三章

    第十二章 1.网页布局类型 (1)固定宽度 (2)流式 (3)响应式Web设计 2.CSS布局的方法 通过给元素设置一个宽度,将它浮到左侧或右侧,就可以创建一个列(元素后面的文本会环绕浮动的元素,仿佛 ...

  3. 《汇编语言 基于x86处理器》第十三章高级语言接口部分的代码 part 2

    ▶ 书中第十三章的程序,主要讲了汇编语言和 C/++ 相互调用的方法 ● 代码,汇编中调用 C++ 函数 ; subr.asm INCLUDE Irvine32.inc askForInteger P ...

  4. 第二十三章 多项目集中权限管理及分布式会话——《跟我学Shiro》

    二十三章 多项目集中权限管理及分布式会话——<跟我学Shiro> 博客分类: 跟我学Shiro 跟我学Shiro  目录贴:跟我学Shiro目录贴 在做一些企业内部项目时或一些互联网后台时 ...

  5. 《深入浅出Node.js》第8章 构建Web应用

    @by Ruth92(转载请注明出处) 第8章 构建Web应用 一.基础功能 请求方法:GET.POST.HEAD.DELETE.PUT.CONNECT GET /path?foo=bar HTTP/ ...

  6. Monotype推出基于HTML5的Web字体平台

    著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台,设计者可以访问近10万字体的目录. Monotype推出基于HTML5的Web字体平台 Monotype推出基于HTML5的We ...

  7. PRML读书会第十三章 Sequential Data(Hidden Markov Models,HMM)

    主讲人 张巍 (新浪微博: @张巍_ISCAS) 软件所-张巍<zh3f@qq.com> 19:01:27 我们开始吧,十三章是关于序列数据,现实中很多数据是有前后关系的,例如语音或者DN ...

  8. 如何把你的图标转换成web字体

    在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...

  9. <构建之法>第十三章到十七章有感以及这个项目读后感

    <构建之法>第十三章到十七章有感 第13章:软件测试方法有哪些? 主要讲了软件测试方法:要说有什么问题就是哪种效率最高? 第14章:质量保障 软件的质量指标是什么?怎么样能够提升软件的质量 ...

随机推荐

  1. for clean

    static(修饰变量方,法:静态块:静态内部类:静态导包) final transient 作用foreach 原理 volatile底层原理实现 集合LIST MAP SET 实现类的底层原理优, ...

  2. My97DatePicker -- 一个功能丰富, 而且兼容 ie 6, 7的日期选择组件

    easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON,  可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...

  3. hbase checkandput

    HBaseEveryDay_Atomic_compare_and_set Updated Sep 29, 2011 by lurker.h...@gmail.com 基本概念 在HBase中Inser ...

  4. windows 7 & protobuf 3.0 & python 3.5

    置顶: 在Python中使用protocol buffers参考指南 http://blog.csdn.net/losophy/article/details/17006573 其实看这篇文章就可以把 ...

  5. 【ORACLE】“System.Exception: System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本。”解决办法

    我的电脑是win10.64位.问题如题,在网上找了很多办法都没搞好,如下: 1.给oracle目录设置“Authenticated Users”用户的“读取/写入”权限 2.IIS网站物理路径凭据添加 ...

  6. android 图片加载优化,避免oom问题产生

    1,及时回收bitmap,在activity的onstop()和onDestory()里面调用如下代码进行bitmap的回收: // 先判断是否已经回收 if(bitmap != null & ...

  7. MITMF

    一. 安装 项目地址:https://github.com/byt3bl33d3r/MITMf 需要自行手动安装python-nfqueue,pefile模块 sudo apt-get install ...

  8. navicat 连接远程mysql

    01putty中session---远程地址(程序访问的域名) ,端口22--load加载进来 02SSH--Auth-Tunnels(隧道)-- putty端口映射SSH--Auth-Tunnels ...

  9. aspnet5安装ef7备忘

    1.安装kvm 首先,你需要以管理员权限打开cmd,执行如下的脚本: @powershell -NoProfile -ExecutionPolicy unrestricted -Command &qu ...

  10. LeetCode OJ Remove Duplicates from Sorted Array II

    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...