css如何引入特殊字体(css如何引入特殊字体样式)

yumo6668小时前技术文章2

在前端开发过程中难免会用到特殊字体,如何引入特殊字体?

  1. 首先你得有字体文件,文件格式为,TTF、OTF、EOT、SVG
  2. 将字体文件放入本地文件夹中或者服务器上
  3. css中引入,以下为引入方法
@font-face {
  font-family: 'icomoon'; // 这里自定义字体名称 
  src:  url('fonts/icomoon.eot?'); // 文件路径或者服务器路径
  src:  url('fonts/icomoon.eot?') format('embedded-opentype'), // format属性:字体的格式 主要用于浏览器识别
    url('fonts/icomoon.ttf?') format('truetype'),
    url('fonts/icomoon.woff?') format('woff'),
    url('fonts/icomoon.svg?') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* 调用 */
body{
    font-family:'icomoon'
}

注:eot为IE专用,ttf官方说是苹果和微软为PostScript 而开发的字体格式,个人理解为通用格式。woff是压缩过后轻量级,svg对文本支持不太好

相关文章

CSS的4种引入方式及优先级(css引入方式有哪些)

CSS的4种引入方式是:行内样式、内嵌样式、链接样式、导入样式1.行内样式最直接最简单的一种,直接对HTML标签使用style="",例如:<p style="color:#F00; ">...

css样式引入优先级?(css引入样式的几种方法)

css中的优先级讲的有1.选择器的优先级。2.样式引入的优先级。今天要研究的是样式引入的优先级。网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何。四种样式的优先级别是:行内样式最...

如何在vue中按需引入element-ui?(vue按需引入elementui组件)

# 环境依赖 @vue/cli 4.0.5 vue 2.6.10" element-ui 2.13.0 babel-plugin-component 1.1.1全局安装可以直接引入整个...

web前端基础之css入门(前端css要掌握到什么程度)

#怎么才能让自己变优秀#css入门:css定义:cascading style sheetscss作用:修饰美化页面css引入方式分为3种:内部样式:在head里用style标签来写内联样式:直接在标...

那些容易被你忽略的HTML重要属性,你知道几个?

前言在前端开发编写html文件的时候,我们可能会很熟练的写出常见的html元素,但是如果问到某些元素的差别时,大家不一定能说的出来,今天就给大家总结一下那些很常见但容易混淆的属性。html与csscs...