在css中引用特殊字体

2024-05-11 10:28:14

在浏览器中引用特殊字体时，

要将字体先下载到我们的电脑上，然后将字体文件放置至项目中。

接下来在css中引用字体时，

1、.EOT，适用于Internet Explorer 4.0+

2、.TTF或.OTF，适用于Firefox 3.5、Safari、Opera

3、.woff，适用于Chrome、IPhone

最常见的是.TTF文件，我们需要通过这种文件格式转换为其余两种文件格式。

转换字体网址：https://everythingfonts.com/font-face

可以迅速直接生成各类其他格式的字体文件；

有很多网站除了文件过大无法转换，要不就是转换过慢。

/*首先对字体进行引用*/

@font-face {

font-family: 'ArialMT';/*这里填写字体名*/

src: url('ArialMT.eot');

src: local('ArialMT Regular'),

local('ArialMT'),

url('../../font/ArialMT.woff') format('woff'), // 适用于chrome、safri

url('../../font/ArialMT.ttf') format('truetype'),

url('../../font/ArialMT.svg#ArialMT') format('svg');

}

.num{

font-family: ArialMT;

}

至此，就可以在浏览中显示了。

https://everythingfonts.com/font-face

在css中引用特殊字体相关推荐

html中css如何引用自定义字体 - 案例篇
html中css引用自定义字体,实现自定义字体样式效果(含案例) 网页中不同的字体,代码是怎么定义的?怎么引用外来字体文件? html 案例 · 代码如下: <!DOCTYPE html> ...
直接在 CSS 中引用 FONTAWESOME 图标（附码表）
直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:befor ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
css如何载入多种字体,在css中包含多种字体的正确方法
我不是一个简单的时刻.哪种方式是在css中包含多种字体的正确方法?这里是简单的例子.在css中包含多种字体的正确方法 This? @font-face { font-family: Delicious ...
怎么样在html中直接使用图片,如何在css中引用图片
如何在css中引用图片 css中引入图片一般有3种形式,1.从本地引用图片:2.从网络引用图片:3.使用base64对图片编码进行引用. 一.从本地引用图片引用本地图片时,会用相对的地址,而不是绝对 ...
Css中常用中文字体的Unicode编码对照
Css中常用中文字体的Unicode编码对照在网页制作中,最常用的恐怕是字体属性了,在调整页面兼容的时候,也常常发现字体名称的原因导致不兼容或乱码,下面给出几种常用字体的ucicode编码对照,方便 ...
php 字体倾斜,CSS中font-style定义字体倾斜体样式的代码示例
本篇文章给大家带来的内容是关于CSS中font-style定义字体倾斜体样式的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.常用斜体语法常用字体样式设置font-st ...
CSS中的五大字体家族（cursive 手写字体族更吸引我）
这是CSS中的五大字体家族. serifserif 中文翻译为"衬线字体族".serif 具有末端加粗.扩张或尖细末端,或以实际的衬线结尾的一类字体.可以看出 serif 总是在文 ...
CSS中的自适应字体大小
本文翻译自:Responsive font size in CSS I've created a site using the Zurb Foundation 3 grid. 我已经使用Zurb Fo ...

最新文章

热门文章