前端学习<二>CSS基础——14-CSS3属性详解:Web字体

前言

开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体。从此,把特殊字体处理成图片的方式便成为了过去。

支持程度比较好,甚至 IE 低版本的浏览器也能支持。

字体的常见格式

不同浏览器所支持的字体格式是不一样的,我们有必要了解一下字体格式的知识。

TureTpe格式:(.ttf)

.ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式。

支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。

OpenType格式:(.otf)

.otf 字体被认为是一种原始的字体格式,其内置在TureType的基础上。

支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。

Web Open Font Format格式:(.woff)

woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离。

支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+。

Embedded Open Type格式:(.eot)

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+。

SVG格式:(.svg)

.svg字体是基于SVG字体渲染的一种格式。

支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。

总结:

了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体。通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式之间的区别。

下载字体的网站推荐:

  • 找字网_免费字体下载、字体在线商用授权、ttf字体分享、专业字体网站!

  • 有字库-首页-全球第一中文web font(在线字体)服务平台、web font、webfont、在线字体、网络字体

WebFont 的使用步骤

打开网站iconfont-webfont平台,如下:

上图中,比如我想要「思源黑体-粗」这个字体,那我就点击红框中的「本地下载」。

下载完成后是一个压缩包,压缩包链接:http://download.csdn.net/download/smyhvae/10253561

解压后如下:

上图中, 我们把箭头处的html文件打开,里面告诉了我们 webfont 的使用步骤

(1)第一步:使用font-face声明字体

 @font-face {font-family: 'webfont';
     src: url('webfont.eot'); /* IE9*/
     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* chrome、firefox */
     url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
     url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
 }

(2)第二步:定义使用webfont的样式

 .web-font{
     font-family:"webfont" !important;
     font-size:16px;font-style:normal;
     -webkit-font-smoothing: antialiased;
     -webkit-text-stroke-width: 0.2px;
     -moz-osx-font-smoothing: grayscale;}

(3)第三步:为文字加上对应的样式

 <i class="web-font">这一分钟,你和我在一起,因为你,我会记得那一分钟。从现在开始,我们就是一分钟的朋友。这是事实,你改变不了,因为已经完成了。</i>

举例:

我们按照上图中的步骤来,引入这个字体。完整版代码如下:

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
 ​
         p{
             font-size:30px;
         }
 ​
         /*  如果要在网页中使用web字体(用户电脑上没有这种字体)*/
         /* 第一步:声明字体*/
         /* 告诉浏览器 去哪找这个字体*/
         @font-face {font-family: 'my-web-font';
             src: url('font/webfont.eot'); /* IE9*/
             src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('font/webfont.woff') format('woff'), /* chrome、firefox */
             url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
             url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
         }
         /* 第二步:定义一个类名,谁加这类名,就会使用 webfont 字体*/
         .webfont{
             font-family: 'my-web-font';
         }
     </style>
 </head>
 <body>
     <!-- 第三步:引用 webfont 字体 -->
     <p class="webfont">生命壹号,永不止步</p>
 </body>
 </html>

代码解释:

(1)my-web-font这个名字是随便起的,只要保证第一步和第二步中的名字一样就行。

(2)因为我把字体文件单独放在了font文件夹中,所以在src中引用字体资源时,写的路径是 font/...

工程文件:2018-02-20-WebFont举例.zip

字体图标(阿里的 iconfont 网站举例)

我们其实可以把图片制作成字体。常见的做法是:把网页中一些小的图标,借助工具生成一个字体包,然后就可以像使用文字一样使用图标了。这样做的优点是:

  • 将所有图标打包成字体库,减少请求;

  • 具有矢量性,可保证清晰度;

  • 使用灵活,便于维护。

也就是说,我们可以把这些图标当作字体来看待,凡是字体拥有的属性(字体大小、颜色等),均适用于图标。

使用步骤如下:(和上一段的使用步骤是一样的)

打开网站iconfont-阿里巴巴矢量图标库,找到想要的图标,加入购物车。然后下载下来:

压缩包下载之后,解压,打开里面的demo.html,里面告诉了我们怎样引用这些图标。

举例1:(图标字体引用)

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         /*申明字体*/
         @font-face {font-family: 'iconfont';
             src: url('font/iconfont.eot'); /* IE9*/
             src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('font/iconfont.woff') format('woff'), /* chrome、firefox */
             url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
             url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
         }
 ​
         .iconfont{
             font-family: iconfont;
         }
 ​
         p{
             width: 200px;
             border: 1px solid #000;
             line-height: 60px;
             font-size:30px;
             margin:100px auto;
             text-align: center;
         }
 ​
         p span{
             color:red;
         }
     </style>
 </head>
 <body>
     <!-- 【重要】编码代表图标 -->
     <p><span class="iconfont">&#xe628;</span>扫码付款</p>
 </body>
 </html>
 ​

效果如下:

举例2:(伪元素的方式使用图标字体)

如果想要在文字的前面加图标字体,我们更习惯采用伪元素的方式进行添加。

代码如下:

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         /*申明字体*/
         @font-face {font-family: 'iconfont';
             src: url('font/iconfont.eot'); /* IE9*/
             src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('font/iconfont.woff') format('woff'), /* chrome、firefox */
             url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
             url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
         }
 ​
 ​
 ​
         p{
             width: 200px;
             border: 1px solid #000;
             line-height: 60px;
             font-size:30px;
             margin:100px auto;
             text-align: center;
             position: relative;
         }
 ​
         .icon::before{
             /*&#xe628;*/
             content:"\e628";
             /*position: absolute;*/
             /*left:10px;*/
             /*top:0px;*/
             font-family: iconfont;
             color:red;
         }
 ​
         span{
             position: relative;
 ​
         }
 ​
 ​
     </style>
 </head>
 <body>
     <p class="icon">扫码付款</p>
     <span class="icon" >我是span</span>
     <div class="icon">divvvvvvvvvvv</div>
 </body>
 </html>
 ​

效果如下:

工程文件:

  • 2018-02-20-图标字体demo.zip

  • 下载链接暂无。

其他相相关网站介绍

  • Font Awesome 使用介绍:Font Awesome,一套绝佳的图标字体库和CSS框架

定制自已的字体图标库:

  • iconfont-阿里巴巴矢量图标库

  • ❍ IcoMoon

SVG素材:

  • iconfont-阿里巴巴矢量图标库

360浏览器网站案例

暂略。

这里涉及到:jQuery fullPage 全屏滚动插件。

  • 中文网址:dowebok-做好网站

  • 相关说明:jQuery全屏滚动插件fullPage.js_dowebok

使用 Bootstrap 网站的图标字体

打开如下网站:Font Awesome, 为 Bootstrap 而创造的图标字体。

如上图所示,下载字体后,进行解压:

使用步骤如下:

(1)如图只是想要字体的话,可以把cssfont这两个文件夹拷贝到项目里。

(2)在html文档中的 <head> 标签里,引入 font-awesome.min.css 文件:

     <link rel="stylesheet" href="css/font-awesome.min.css">

(3)想在哪个标签里用这个图标,直接在这个标签里加className就行(className都在网站上列出来了)。

完整版代码如下:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="css/font-awesome.min.css">
     <style>
 ​
     </style>
 </head>
 <body>
     <span class="icon-play">播放</span>
 </body>
 </html>

写在最后:希望大家可以点个关注点个赞,这对up真的很重要!谢谢!

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506925.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言内存函数(超详解)

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 点击主页&#xff1a;optimistic_chen和专栏&#xff1a;c语言&#xff0c; 创作不易&#xff0c;大佬们点赞鼓…

安全用电监控系统在工厂的研究与应用论述

摘 要&#xff1a;随着社会时代的发展&#xff0c;人们的安全意识越来越强烈&#xff0c;在人们生活和工作中离不开各种用电设备&#xff0c;用电设备的安全使用是保障人们生命安全的重要内容。工厂因自身厂内工作环境的特殊性&#xff0c;用电设备的种类多且复杂&#xff0c;如…

【数据结构与算法初阶(c语言)】插入排序、希尔排序、选择排序、堆排序、冒泡排序、快速排序、归并排序、计数排序-全梳理(万字详解,干货满满,建议三连收藏)

目录 1.排序的概念及其运用 1.1排序的概念 1.2排序运用 1.3常见的排序算法 2.插入排序 2.1 原理演示&#xff1a;​编辑 2.2 算法实现 2.3 算法的时间复杂度和空间复杂度分析 3.希尔排序 3.1算法思想 3.2原理演示 3.3代码实现 3.4希尔算法的时间复杂度 4.冒泡排序 4.1冒泡排…

二、图的表示和带权图

文章目录 1、图的表示1.1 邻接矩阵1.2 邻接表1.3 关联矩阵 2、带权图2.1 最短路径问题2.2 中国邮递员问题2.3 旅行商问题 THE END 1、图的表示 1.1 邻接矩阵 \qquad 将图的所有顶点分别构成一个二维矩阵的行列&#xff0c;将顶点之间的边关系表示在构成的矩阵之中&#xff0c;…

在CentOS 8.5.2111下安装vncserver

# 参考&#xff1a; 如何在 CentOS 8/RHEL 8 上安装配置 VNC 服务器 安装CentOS 8.5.2111 及 vncserver # 标准安装步骤 安装GNOME桌面环境使用屏幕号:1。安装VNC服务器&#xff08;tigervnc-server tigervnc&#xff09;设置VNC密码设置VNC服务器配置文件开启vnc服务。开放防…

FX110网:货币交易5个亏损典型,你有中招吗?

人生百年几今日&#xff0c;今日不为真可惜&#xff01;若言姑待明朝至&#xff0c;明朝又有明朝事。很多投资朋友总是抱怨&#xff0c;为什么总是看见别人赚钱&#xff0c;自己一进场就亏损&#xff0c;那么在这里投资失败无非两点&#xff1a;一是自身原因&#xff0c;自己没…

SAP 销售分销中的免费货物

销售业务中&#xff0c;免费货物在您与客户协商价格时起着重要作用。在零售、化工或消费品这样的行业部门中&#xff0c;通常以免费货物的形式向客户提供折扣。 作为用户&#xff0c;业务用户希望能自动确定免费货物并将它们归入销售凭证中。同时需要向成本控制部门提供免费货物…

密码算法概论

基本概念 什么是密码学&#xff1f; 简单来说&#xff0c;密码学就是研究编制密码和破译密码的技术科学 例题&#xff1a; 密码学的三个阶段 古代到1949年&#xff1a;具有艺术性的科学1949到1975年&#xff1a;IBM制定了加密标准DES1976至今&#xff1a;1976年开创了公钥密…

盘点那些好用的SAP FIORI App(一) Display Customer/Supplier List

做SAP运维的人可能都知道&#xff0c;SAP标准的菜单里面基本没有好用的report可以用来批量显示并导出客户清单&#xff0c;或者供应商清单。T-code MKVZ 可以导出供应商的采购数据&#xff0c;但仅限于部分字段&#xff0c;客户清单的话系统标准的有这个S_ALR_87012179 - Custo…

电脑端手机配置检测工具推荐与使用指南

摘要 本文介绍了如何使用克魔助手工具在电脑上检测手机的配置信息。通过该工具&#xff0c;用户可以全面了解手机的硬件和操作系统信息&#xff0c;包括电池、CPU、内存、基带信息和销售信息等。 引言 在日常工作中&#xff0c;了解手机的配置信息对于开发和测试人员非常重要…

算法刷题笔记(3.25-3.29)

算法刷题笔记 3.25-3.29 1. 相同的树2. 二叉树的最近公共祖先3. 二叉搜索树中第K小的元素通过双端队列duque 中序遍历 4. 二叉树的锯齿形层序遍历new LinkedList<Integer>(levelList)双端队列复制 数组需要左右顺序&#xff0c;考虑双端队列 5. 岛屿数量6. 字典序排数&am…

【应用浅谈】Odoo的库存计价与产品成本(一)

序言:时间是我们最宝贵的财富,珍惜手上的每个时分 Odoo的库存&#xff08;Stock&#xff09;模块拥有众多功能&#xff0c;其中库存计价是一项非常重要的功能&#xff0c;原生的成本方法分三种&#xff1a;【标准成本】&#xff0c;【平均成本】&#xff0c;【先进先出】&#…

个人博客系统|基于Springboot的个人博客系统设计与实现(源码+数据库+文档)

个人博客系统目录 目录 基于Springboot的个人博客系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能实现 &#xff08;1&#xff09;用户管理 &#xff08;2&#xff09;文章分类管理 &#xff08;3&#xff09;公告信息管理 &#xff08;4&#…

微服务之分布式事务概念

微服务之分布式事务概念 CAP定理和Base理论 CAP定理 CAP定理在1998年被加州大学的计算机科学家 Eric Brewer 提出&#xff0c;分布式系统有三个指标&#xff1a; 一致性&#xff08;Consistency&#xff09;可用性&#xff08;Availability&#xff09;分区容错性&#xff…

Taro 关于微信订阅消息的调用

requestSubscribeMessage 是微信提供的方法 封装的调用requestSubscribeMessage的方法 示例图如下 import {getWechatTemplates,postSubscribeNotice } from /magic-sdk/apis/wechat-service; import {WechatTemplateType,SubscribeNoticeObjTypeOptions,WechatTemplateEvent…

详细分析Mysql中的STR_TO_DATE基本知识(全)

目录 前言1. 基本知识2. Demo3. 实战Demo4. Sql彩蛋4.1 LPAD函数4.2 SUBSTRING_INDEX函数 5. Java彩蛋 前言 对于该知识点&#xff0c;主要因为数据库类型为String&#xff08;类似2024-03-26&#xff09;&#xff0c;放置于后端操作后&#xff0c;需要自定义比较&#xff0c;…

做了盲/埋孔,PCB还有必要做盘中孔吗?

在PCB设计中&#xff0c;过孔类型可分为盲孔、埋孔和盘中孔&#xff0c;它们各自有不同应用场景和优势&#xff0c;盲孔和埋孔主要用于实现多层板之间的电气连接&#xff0c;而盘中孔是元器件的固定及焊接。如果PCB板上做了盲孔和埋孔&#xff0c;那么有必要做盘中孔吗&#xf…

java的Class文件分析

文章目录 1. 简介2. Class文件分析 1. 简介 Java有一个著名的口号一次编译&#xff0c;处处运行&#xff0c;这就凸显出来Java程序的一个特点平台无关性。Java的平台无关性是基于各种不同平台的Java虚拟机&#xff0c;以及所有平台都统一支持的程序存储格式—字节码实现的。在…

B端管理系统:UI设计师为什么没有话语权?

一、六大因素&#xff0c;导致了UI设计师话语权缺失。 专业性差异&#xff1a; UI设计师主要负责界面设计和用户体验&#xff0c;而在B端管理系统中&#xff0c;功能性和操作流程往往更为重要&#xff0c;需要产品经理和开发人员更多的参与&#xff0c;他们对于系统的功能和技…

Springboot Thymeleaf 实现数据添加、修改、查询、删除

1、引言 在Spring Boot中使用Thymeleaf模板引擎实现数据的添加、修改、查询和删除功能&#xff0c;通常步骤如下&#xff1a; 在Controller类中&#xff0c;定义处理HTTP请求的方法。创建Thymeleaf模板来处理表单的显示和数据的绑定。 2、用户数据添加 1、 在Controller类中…