css引入的字体库

蔚落 2022-06-03 21:20 486阅读 0赞

原文地址：https://www.2cto.com/kf/201312/265179.html

@font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意，早在2001年时就被提出来，只不过近两年才被各浏览器广泛支持。而且各浏览器支持的字体文件格式也可能不同，一般来说如下四种格式可覆盖所有浏览器。  
eot：该格式仅在老版本的IE中使用，浏览器兼容性查看https://caniuse.sinaapp.com/html/item/eot/index.html  
  
ttf：(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行，已经变成最常用的一种字体文件表示方式，支持的浏览器很多。浏览器兼容性查看https://caniuse.sinaapp.com/html/item/ttf/index.html  
  
svg：(Scalable Vector Graphics)该字体可能最早在IOS设备上被支持，没有ttf格式使用的广泛。浏览器兼容性查看https://caniuse.sinaapp.com/html/item/svg-fonts/index.html  
  
woff：（Web Open Font Format）是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由W3C标准化，以求成为web字体的统一标准。浏览器兼容性查看https://caniuse.sinaapp.com/html/item/woff/index.html

第一步，在CSS中引入字体并给名字取一个合适的名字

@font-face {
        /* font-properties */
        font-family: pictos;
        src:url('pictos/pictos-web.woff'),  
        url('pictos/pictos-web.ttf'),
        url('pictos/pictos-web.eot'); /* IE9 */
    }

第二步，使用刚刚定义的字体

p {
        font-family: pictos;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp全局引入字体

uniapp引入各种字体一.下载字体 ![在这里插入图片描述][20210115093344326.png] 二.在全局设置字体在font-face中说明，

喜欢ヅ旅行/ 2023年01月07日 01:26/ 0 赞/ 240 阅读

相关微信小程序如何引入iconfont图标字体库

我选择引入字体图标库的原因是加载图片会影响小程序页面的打开速度第一步：去[阿里巴巴][Link 1]的图标库找到你喜欢的图标加入购物车添加到你创建的项目 !

待我称王封你为后i/ 2022年12月06日 01:14/ 0 赞/ 240 阅读

相关 css引入外部字体

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera .EOT，适用于Internet Explorer 4.0+ .SVG，适用于Ch

落日映苍穹つ/ 2022年09月24日 07:24/ 0 赞/ 227 阅读

相关引入谷歌字体

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

左手的ㄟ右手/ 2022年08月31日 05:56/ 0 赞/ 214 阅读

相关 css引入的字体库

原文地址：https://www.2cto.com/kf/201312/265179.html @font-face可以实现从服务器端加载字体，所有浏览器中使用的字

蔚落/ 2022年06月03日 21:20/ 0 赞/ 487 阅读

相关 Css3引入外部字体

设计师选择了一个字体“汉仪细行楷简”,计算机本身并没有这个字体，需要下载下来才可以展示给用户。这个时候需要把你自己下载好的字体放在项目文件中，同时重新引入才可以使用外部字体

谁借莪１个温暖的怀抱￠/ 2022年05月27日 03:07/ 0 赞/ 222 阅读

相关在nuxt中引入Font Awesome字体图标库

介绍在element-ui框架中提供了一些图标样式，但是种类比较少，所以在这里提供一套更完善的字体图标库Font Awesome（[官方文档][Link 1]），下面就

柔情只为你懂/ 2022年05月09日 09:38/ 0 赞/ 394 阅读

相关 UNI-APP引入第三方字体库问题

一、背景描述在开发APP的时候，经常需要引入第三方字体图标，由于第一次使用[UNI-APP][]这一前端混合框架做APP开发，在引入[阿里巴巴矢量图标库][Link 1]不

叁歲伎倆/ 2022年02月15日 09:23/ 0 赞/ 1811 阅读

相关 FontAwesome图标字体库和CSS框架

1、CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架，为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色

系统管理员/ 2021年09月02日 05:59/ 0 赞/ 557 阅读

相关 css引入外部字体

css引入外部字体 @font-face{ font-family: 'YaHei Consolas Hybrid'; src :

今天药忘吃喽~/ 2021年07月26日 11:35/ 0 赞/ 503 阅读