如何在前端项目中引入定制化字体/图标

最新推荐文章于 2024-06-19 18:00:56 发布
最新推荐文章于 2024-06-19 18:00:56 发布
阅读量830 收藏 2
点赞数
文章标签： javascript css3 html css web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44153194/article/details/109690144
版权
本文介绍了如何在前端项目中引入定制化字体和图标，包括通过@font-face规则，讨论了ttf、woff、svg、eot等常见格式类型及其浏览器支持情况，并提到了使用伪类选择器content属性插入图标的方法。
摘要由CSDN通过智能技术生成

1.找到自己需要的icon资源

推荐：https://www.iconfont.cn/

2.@font-face

@font-face是CSS3的一种规则，解决了用户只能使用电脑操作系统自带字体的问题，开发者可以通过该属性自定义引入特殊的字体。

浏览器支持：

Internet ExplorerFirefoxOperaGoogle ChromeSafari

最低0.47元/天 解锁文章
adam lambert
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3自定义字体、字体图标
小赛赛爱吃肉
05-12 965
自定义字体 通常情况下，我们一般在设置字体的时候设置的是操作系统上的字体。如果用户的操作系统中没有该字体就会影响整个前端的一个用户体验。 在CSS3 中，新增了 自定义字体的内容，可以让我们自己定义一个字体，然后放到服务器上，这样尽管用户的操作系统中没有该字体，也会从服务器下载到指定的字体，不会影响用户体验。 文件结构如下 <style> /* 使用 @font-face 来指...
如何在前端项目中引入外部字体并使用？
虎康的博客
01-12 1128
文章转自掘金：在前端开发中，不免遇到会有需要更换字体的需求，这时我们先要给需求方讲清楚更换字体一定要考虑到版权问题，要找有明确说明是免费使用的授权文档，不然一不小心就会成为背锅侠，这可百口莫辩了。我们UI选取的两个字体都是他去找了相关的授权使用书，证明是免费商业可用，我们才给他使用的，没有授权书我们可不能稀里糊涂的更换字体，这个一定要注意，谨记！
前端引入不同的字体风格
最新发布
A15029296293的博客
06-19 396
为了实现页面更加美观，产品可能希望有不同的字体风格，那么就需要前端去实现不同的字体风格，实现不同的字体风格也非常简单，步骤如下。
自定义字体图标
白豆的微博
12-01 389
/*自定义字体图标*/ @font-face{ font-family: wjs_font_icon; src: url(../fonts/icomoon.eot) format('embedded-opentype'),     url(../fonts/icomoon.svg) format('svg'),     url(../fonts/icomoon.ttf) format('
写给前端白痴的博客园样式定制指南
an38703413的博客
08-31 259
THE SHORT STORY 只要两步就可以拥有以下页面。（猫是会眨眼的哦） 第一步：到你的博客后台管理，将博客皮肤设置为darkgreentrip 第二步： 分别粘贴以下代码到“页面定制CSS代码”和“页首Html代码”中（注意，不要勾选“禁用模板默认CSS”） /*-----------------------------页面定制css代码---------...
Web开发中自定义字体图标的使用
永栋的博客
04-20 279
1.进入阿里巴巴的字体图标库（把想要的字体图标加入购物车） 2.下载代码 3.在项目新建文件夹把下边的五个文件放在该文件夹 4.直接引入iconfont.css使用里边自定义的字体图标 ...
audio type多种类型_http content-type常见文件格式类型
weixin_29734285的博客
02-06 657
.*application/octet-stream二进制流，不知道下载文件类型.pdfapplication/pdfPDF(Portable Document Format的简称，意为“便携式文件格式”).aiapplication/postscriptPostScript(PS)是主要用于电子产业和桌面出版领域的一种页面描述语言和编程语言。.xmlapplication/atom+xmlAto...
Vue 第三方字体图标引入 Font Awesome的方法
12-10
在Vue项目中引入Font Awesome，可以让开发者方便地利用其图标资源，而无需处理图片。 **安装Font Awesome** 在开始之前，首先确保你的项目已经安装了Node.js和npm。然后，通过npm（Node Package Manager）在你的...
前端项目-clarity-ui.zip
09-02
为了将 Clarity UI 应用于你的前端项目，你需要将其引入到项目中，这通常涉及设置 CSS 和 JavaScript 引入方式（如通过 CDN 或本地构建），然后根据需要使用提供的组件和类名。记得根据项目需求进行适当的定制和主题...
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
10-17
在开发微信小程序时，为了实现个性化的界面设计，开发者经常需要用到自定义的字体图标。本文将详细介绍如何在WebStorm环境中，结合阿里图标库，来实现微信小程序中的自定义字体图标应用。 1. 阿里图标库下载与准备 ...
前端项目-muicss.zip
09-02
- `dist` 目录：包含编译后的CSS和JavaScript文件，可以直接在项目中使用。 - `src` 目录：源代码，用于编译和自定义。 - `docs` 或 `examples` 目录：提供示例代码和文档，帮助开发者了解如何使用框架。 - `...
FontAwesome v4.7字体图标方案.zip
07-22
总结，FontAwesome 4.7字体图标方案提供了一套丰富的图标资源，其易于使用、响应式、高度可定制的特点使其成为Web开发中的必备工具。无论是用于导航、按钮、提示还是装饰，都能大大提升用户体验和界面美观度。开发者...
怎么才能使服务器Nginx（或者Apache）支持字体文件
热门推荐
RainSorrow的博客
07-24 1万+
一：Git是什么？ Git是目前世界上最先进的分布式版本控制系统。 二：SVN与Git的最主要的区别？ SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而干活的时候，用的都是自己的电脑，所以首先要从中央服务器哪里得到最新的版本，然后干活，干完后，需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作，如果在局域网还可以，带宽够大，速度够快，如果在互联网下，如果网速慢
使用iconfont 嵌入头部图标
purple_lumpy的博客
03-24 1427
我们现在iconfront 中下载下来需要的图标。下载解压后的文件如下。 第二排的文件( 和第一排的.woff2 )，是我们要放到项目中去的。 那么，我们首先在项目目录的src/statics 下，创建一个目录 iconfont，然后把第二排的文件拖进来。 然后，我们需要改一下其中的iconfont.css 文件，把里面字体的路径改成相对路径。如下。 @font-face {font...
uni-app中使用iconfont
weixin_43837268的博客
02-02 334
1.app.vue中引入 <script> </script> <style> /*每个页面公共css */ @font-face {font-family: "iconfont"; src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANoAAsAAAAAB3gAAAMcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAq
css 中引入第三方字体
文摘资讯
01-09 1481
CSS中可以使用font-face属性即可实现调用任何外部等特殊字体。font-face属性介绍及其实例：对浏览器的支持：Firefox、Chrome、Safari 以及 Opera 支...
IIS配置MIME类型
道阻且长，行则将至。
09-30 1056
IIS配置MIME类型 进入IIS的步骤： 打开控制面板-程序-程序与功能- 启用或关闭Windows功能。 打开IIS 搜索框输入IIS 看到此网站对应的MIME类型，点击右侧的“添加”。 添加如下2个MIME名称和类型，如下图（根据自己的需要添加） 名称:.woff 类型：application/font-woff 名称：.woff2 类型：application/font-woff2 ...
从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-20 733
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步????「开始优化」部分直接查看优化手段背景前段时间公司服...
vue首次加载白屏过渡动画（vue优化）
一人创客的博客
09-01 1571
过渡动画需要在index.html文件里面添加 1.css，在public.index.css创建index.css html, body, #app { height: 100%; margin: 0px; padding: 0px; } .chromeframe { margin: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值