css如何引用.ttf字体文件|@font-face

这里复习一下如何在css文件里引用.ttf字体文件。

如下图，红色圈起来的标题需要使用productsans字体，绿色圈起来的小标题需要使用roboto字体，字体文件已下载到fonts文件夹里，接下来，我们可以这样使用。

在css文件里使用

@font-face{

font-family: ProductSans(字体)；

src: url('../fonts/ProductSans-Bold.ttf')

}

@font-face{

font-family:Roboto(字体);

src:url('../fonts/Roboto-Regular.ttf')

}

然后点击保存，刷新一下网页，就有效果了

以上就是css引入字体文件的用法及效果，有问题或更多方法请多多指教！

css如何引用.ttf字体文件|@font-face相关推荐

如何在css里面引用ttf的字体？
1.找到网站下载自己需要的字体: 比如:在这里选择字体我选择的是:叶根友行书繁体下载 2.从下载压缩包中复制xindexingcao57.tff文件复制到自己的web项目中的fonts文件夹 3. ...
html中css如何引用自定义字体 - 案例篇
html中css引用自定义字体,实现自定义字体样式效果(含案例) 网页中不同的字体,代码是怎么定义的?怎么引用外来字体文件? html 案例 · 代码如下: <!DOCTYPE html> ...
【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )
文章目录一.FlutterIcon 下载图标二.自定义 svg 图标生成 ttf 字体文件三.使用下载的 ttf 图标文件四.完整代码示例五.相关资源一.FlutterIcon 下载图标 ...
ttf文件 python 打开_[译]JS解析TTF字体文件
把字体拖到下边的方框,获取其中的奥妙!点此获取示例ttf字体文件. TTF文件拖到这里在这篇文章,我们计划操作如下: 将字体文件拖入网页,并读取之尽管ttf文件是为C语言读取设计的,但我们仍试图解 ...
.ttf字体文件引入vue项目及使用
出自文章:.ttf字体文件引入vue项目及使用 UED要求使用非系统自带字体 1.在项目的assets文件夹中创建fonts文件夹,将下载好的.ttf字体文件放进去,并创建font.css文件 2.在 ...
LVGL学习之路——基于lv_lib_freetype库的TTF字体文件动态加载中文字体（阿里普惠字体）
前言在学习lvgl中,在英文字体上很多人都用过,但是中文字体往往需要靠取模去实现.那么我就在想,如何像windows那样加载动态的字体呢,这样想做多大字体都行.于是就开始了字体的移植. 什么是t ...
如何编辑ttf字体文件
libfreetype的目标是以最小的内存最快的速度,读取和渲染字体.因此libfreetype并不适宜用来编辑ttf字体文件. 编辑字体文件,可以用FontCreator.微软fonttools.f ...
win7使用android字体文件,处置win7系统安装TTF字体文件的详细步骤
技术小编发觉操作系统在使用途中会有win7系统安装TTF字体文件的问题,但是很多朋友还不了解win7系统安装TTF字体文件的情况该怎么操作,今天我就来将win7系统安装TTF字体文件的方法分享给你们, ...
java 解析ttf字体文件
要了解ttf字体文件的原理更方便对代码的理解 package com.maoyan.movie.ttf.encode;public class PostTableHeader {public long ...

css如何引用.ttf字体文件|@font-face

css如何引用.ttf字体文件|@font-face相关推荐

最新文章

热门文章