CSS 使用 @font-face 引入外部字体

news2024/11/15 11:21:05

CSS 使用 @font-face 引入外部字体

          • 下载所需字体到本地
          • 把下载字体文件放入font文件夹里
          • 定义字体
          • 引用字体
          • 结果

😬没有退路时,潜能就发挥出来了

CSS 中使用开源字体 得意黑
得意黑的字体是真的好看 ✨推荐使用

下载所需字体到本地

这里介绍一款不错的中文字体 得意黑

可以到 GitHub 下载 Releases · atelier-anchor/smiley-sans (github.com)

也可以到这里免费下载

(118条消息) 前端-中文字体推荐-得意黑-HTML5文档类资源-CSDN文库

把下载字体文件放入font文件夹里

定义字体

使用 css 中的 @font-face 引入字体,分别是字体名字和路径

更多属性可参 @font-face - CSS(层叠样式表) | MDN (mozilla.org)

@font-face {
    /* 得意黑 https://github.com/atelier-anchor/smiley-sans/releases */
    font-family: 'SmileySans';
    src:  url("./SmileySans-Oblique.otf.woff2") format('woff2');
}
引用字体
/* 标题 */
selector {
    /* 字体 */
    font-family:'与上面定义的字体名称一致即可', Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
结果

不得不说 这个字体还是蛮好看的

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Shiro:核心组件、配置类、多Realm场景、自定义拦截器、实战场景

目录Shiro 的核心组件Shiro 认证流程Shiro 授权流程单 RealmShiro 登陆认证 SimpleAuthenticationInfo 对象多 RealmShiroConfigShiro过滤器配置 ShiroFilterFactoryBeanShiro自定义过滤器Shiro 过滤器执行链路梳理代码自取层级结构Login.javaBearerTokenRealm.javaShiroRealm.…

桶排序详细说明及实现-python

前言: 说到桶排序,那必定要有桶,那么桶的作用是什么呢?桶的作用就是将序列分为若干份放到桶中,每个桶中能装入的数量范围是一定的,只有最后一个桶可以设置装入很多。这是因为当分的桶一定时,前面…

SpringMVC-基础入门

文章目录SpringMVC1,SpringMVC概述2,SpringMVC入门案例2.1 需求分析2.2 案例制作步骤1:创建Maven项目步骤2:补全目录结构步骤3:导入jar包步骤4:创建配置类步骤5:创建Controller类步骤6:使用配置类替换web.xml步骤7:配置Tomcat环境步骤8:启动运行项目步骤…

【软考】系统集成项目管理工程师(十五)项目采购管理

一、项目采购管理概述二、项目采购管理子过程1. 编制采购管理计划2. 实施采购3. 控制采购4. 结束采购三、招投标1. 招标人的权利和义务2. 招标代理机构的权利和义务3. 招标方式和招投标程序4. 相关的法律责任一、项目采购管理概述 采购意味着从外界来源获得商品或服务,采购一…

Vue3组件初始化流程分析

本文主要来分析 vue3 组件的初始化(基于runtime-core(核心运行时)包),将从createApp、mount 等常用 API 入手来分析组件的挂载、普通元素的挂载流程。 createApp 1、创建一个应用实例。使用方式如下: import { createApp } from vue import App from ./App.vueco…

进制转换(二进制、八进制、十进制、十六进制)超详细版

今天来总结一下各种进制转换问题,详细齐全易于理解,希望对你有帮助哦! 各种进制之间的相互转换 先从我们最熟悉的十进制入手吧,其他进制与十进制的转换方法都是一样的。 整型有4种进制形式: 1.十进制: …

[ChatGPT]

最近hatGPT火爆全宇宙,几乎所有圈内人都在谈论这个美国人工智能公司OpenAI发布免费机器人对话模型ChatGPT(GPT-3.5系列),模型中首次采用RLHF(从人类反馈中强化学习)方式。模型目前处于测试阶段,…

Windows 服务器刷题(2)(带答案)

作者简介:一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页​​​​​​ 目录 前言 一.刷题 前言 本章将会讲解Windows服务器刷题(2) 一…

新年礼物已收到!2022 Apache IoTDB Commits 数量排名 3/351!

社区喜报!据 The Apache Software Foundation 官方 Projects Statistics(项目信息统计网站)的实时数据显示,Apache IoTDB 在过去 12 个月(即 2022 年度)共发表 6829 Commits,排名 2022 年度 Apa…

C++ Primer笔记——默认移动操作、移动迭代器、左右值引用成员函数、标准库仿函数、function包装器

目录 一.P476 合成的移动操作 二.P480 移动迭代器 三.P483 右值和左值引用成员函数 四.P510 标准库定义的仿函数 五.P512 标准库function类型(包装器) 一.P476 合成的移动操作 什么时候会有默认的移动构造和移动赋值函数,需满足以下几点…

Java设计模式-中介者模式Mediator

介绍 中介者模式(Mediator Pattern),用一个中介对象来封装一系列的对象交互。中介者使各个对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。中介者模式属于行为型模式,使代…

linux搭建webapp实战

首先介绍下linux,linux因其开源,定制化高,安全等原因,成为了目前web应用部署首选的操作系统,linux操作系统有很多版本,常见的有centos,debian,RHLE,redhat,乌…

【Linux】gcc/g++编译器、make/Makefile自动化构建工具

作者:小卢 专栏:《Linux》 喜欢的话:世间因为少年的挺身而出,而更加瑰丽。 ——《人民日报》 目录 1.gcc/c的概念: 2.程序编译过程详解: 2.1程序编译过程: 2.…

微电网(风、光、储能、需求响应)【Simulink 仿真实现】

目录 1 展现 2 典型几个介绍 2.1 采用PR的三相逆变器电压控制 2.2 太阳能直流微电网系统 2.3 主电网故障时的交流微电网性能 2.4 混合光伏、双馈发电和电池能源的微电网集成 3 写在后面 4 完整资源 1 展现 随便打开一个,就以第一个(采用PID的三…

【GD32F427开发板试用】macOS/Linux系统开发环境搭建(开发、编译、烧录、调试)

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动,更多开发板试用活动请关注极术社区网站。作者:HonestQiao 我日常的工作环境使用的是macOS系统或者Linux系统,万不得已才使用Windows。 GD32官方提供了Keil MDK-ARM和IAR两款工具…

如何使用Dx命令将jar打包成Dex,需要使用D8命令

使用dx打包的完整命令,将D:\ssh1.0.jar打包成MyClass.dex,MyClass.dex将会输出在当前CMD命令窗口的目录下。dx --dex --no-strict --min-sdk-version26 --outputMyClass.dex D:\ssh1.0.jar运行结果:不要使用dx命令,打出来的dex可以…

NestJS 项目实战 技术选型 (文末附视频)

前言 通过上一章的学习,我们了解了网关系统,并且针对要做的功能做了项目架构设计与需求拆解。 那在一个项目正式开发之前,我们还需要做一个技术调研,从开发框架、使用的工具、数据库等等进行一系列的预研,避免在业务…

嘿~ 基于分布式架构的技术交流社区(WhiteHoleV0.7)即将竣工!

文章目录前言项目介绍WhiteHole期望立项作者功能/模块简介用户模块问答模块社区模块博文模块Next前言 拖更,拖延了这么久,耗时超过3个月的项目,WhiteHoleV0.7 版本即将迎来最后的收尾工作。当然考虑到服务成本,和开发进度&#x…

【以太网硬件十九】SGMII到底能不能直接出光模块?

SGMII接口到底能不能直接出光模块?先说结论:我认为可以,但是有限制,此时的光口只支持强制模式,不支持自协商。如果对端是1000base-X接口,对端也需要把自协商关闭才能与SGMII直出的光口建立连接。为什么SGMI…

你是真的“C”——C语言详解求素数n种境界~

详解C语言函数模块知识(下篇)😎前言🙌必备小知识~😘C语言详解《试除法》求解素数🙌试除法第一层境界~ 😊试除法境界2~😊试除法境界3~😊试除法境界4~😊C语言详解《筛选法》…