在前端项目中使用字体 （谷歌字体 和 阿里字体）

最新推荐文章于 2024-03-01 19:47:15 发布
最新推荐文章于 2024-03-01 19:47:15 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haodanzj/article/details/131306092
版权

1.使用谷歌字体 网站链接

  • 1. 进入网站后选择你想要的字体 点进去

  • 2. 进入网站后 点击select Thin选择 字体在这里插入图片描述

  • 3.点击右上角，打开字体列表在这里插入图片描述

  • 4. 把cdn导入到项目中 然后设置font-family为你选择的字体在这里插入图片描述

完成以上操作 就在前端项目中成功引入谷歌字体了

2. 使用阿里字体 网站链接

  • 1.进入网站后选择你想要的字体 点进去

  • 2. 点击代码引用 复制其中的代码 放到项目中设置 font-family为你选择的字体

在这里插入图片描述

  • 3. 在项目中的使用案例在这里插入图片描述

以上就完成了阿里的字体引入

morenhaodan
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【js逆向】Python爬虫如何突破字体反爬，拿到想要数据
景天科技苑
08-05 2万+
在JavaScript逆向工程中，字体反爬（Font Anti-Scraping）是一种常见的反爬虫技术，它通过自定义字体来显示网页中的文字，使得这些文字在标准字体库中无法直接识别，从而增加爬虫获取文本内容的难度。本文将教会你破解字体反爬的方法
CDN引起的 字体跨域问题，解决方案和问题
热门推荐
小北哥哥和北妈
01-17 2万+
今天部署外网上线事宜，前端我来配置了CDN，阿里云的 CDN服务，其他都没问题，简直了   阿里云的CDN  GZIP压缩也是够强 开启GZIP压缩后，原来我几十K 的 JS文件，直接变成了 不足1K ，秒加载，你妹，我们项目组高兴了一把。 这网站还不是秒开么 ？ ----------------------------------------------   看效果 ：   ...
cdn-font:自用字体CDN加速仓库（jsDelivr）如果需要白嫖其他的加速可能会另起炉灶
03-27
CDN字体 自用字体CDN加速仓库（jsDelivr）如果需要白嫖其他的加速可能会另起炉灶
Google 字体在前端开发中的使用
泽里
11-28 596
Google 字体API
如何在前端项目中引入外部字体并使用？
虎康的博客
01-12 1183
文章转自掘金：在前端开发中，不免遇到会有需要更换字体的需求，这时我们先要给需求方讲清楚更换字体一定要考虑到版权问题，要找有明确说明是免费使用的授权文档，不然一不小心就会成为背锅侠，这可百口莫辩了。我们UI选取的两个字体都是他去找了相关的授权使用书，证明是免费商业可用，我们才给他使用的，没有授权书我们可不能稀里糊涂的更换字体，这个一定要注意，谨记！
引入谷歌字体
huhuhuja
07-23 195
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CS.
前端中如何引入字体包？
qq_58633794的博客
02-27 604
2、通过以下方式导入（全局或者局部都可以）1、把字体文件引入到放置图片或者任意位置。3、通过以下方式调用。
如何使用谷歌字体
weixin_34416649的博客
09-19 144
2019独角兽企业重金招聘Python工程师标准>>> ...
meedu后台的前端项目.zip
最新发布
03-01
让我们深入探讨这个前端项目可能包含的组件、技术和实践。 1. **项目结构**： - `backend-master` 文件夹很可能是整个项目的根目录，里面通常会包含`src`、`public`、`node_modules`、`package.json`等文件或...
阿里前端面试第三期.pdf
05-13
2. React/Vue项目中key的作用： - 提高渲染效率。 - 辅助React/Vue进行DOM比较。 3. ['1','2','3'].map(parseInt)的原理： - map方法将元素传递给回调函数，回调函数的参数是当前元素的值，当前元素的索引和数组...
Web字体使用指南：嵌入、引入与iconfont
# 1. 理解Web字体的基础知识 1. 什么是Web字体？ 在Web开发中，Web字体是指通过网络传输至用户设备并用于显示文本的字体文件。...在Web开发中，常见的Web字体类型包括系统字体、网络字体、自定义字体等。系统字体
前端的文字的字体应该如何设置
舒一笑的博客
03-01 893
要设置文字的字体，在CSS中使用属性。这个属性可以接受一个或多个字体名称作为其值，浏览器会按照列表中的顺序尝试使用这些字体渲染文本。如果第一个字体不可用，浏览器会尝试使用列表中的下一个字体，依此类推。
引入第三方字体库 第三方字体库Google Fonts
LRQQHM的博客
07-21 2363
googlefonts官方网站 googlefonts中国网站本人是在微信小程序中引入 在static中建一个文件夹font-family 例如字体链接：https://fonts.font.im/css?family=Kirang+Haerang 将该链接的返回的资源的复制到css文件中 main.js引入 微信小程序不校验合法域名就能看到结果
关于HTML页面使用阿里字体
m0_45938038的博客
07-18 857
4、<style>里继续加入以下代码，其中，.b是自定义的类选择器。3、 在HTML页面的<head>里的<style>里加入以下代码。5、在HTML页面的<body>里的写一个div，使用阿里字体，3、 在项目里新建一个font目录，然后把字体包解压到这里。iconfont-阿里巴巴矢量图标库。阿里图标库iconfont地址。1、点击字体库选择字体。
阿里在线字体库超级简单又快捷的使用方法+Dcloud插件使用图标
A_9888的博客
06-17 906
阿里在线字体库超级简单又快捷的使用方法： 1.找到自己的字体图标后点击如图三个圈起来的地方，复制 2. 复制代码后再浏览器输入 https:+粘贴复制的代码回车会打开一个新的font字体的css样式，复制此条 3.在自己的项目中新建一个存放字体的css文件，然后粘贴 4.页面使用直接导入该文件，我这里是在vue中style里面通过@import ‘…/…/common/css/icons.css’;导入的。 5.页面使用 直接在标签中参加class iconfont是每个用到样式必须加的，icon-
前端项目中引入字体文件并使用
lwhuaijin的博客
02-04 328
前端代码如何引入外部字体样式
前端阿里云iconfont 字体图标正确使用方法
qq_42415827的博客
03-10 5043
uniapp+vue2.0开发 之 阿里云字体图标在项目中引用（支持所有端）
2024-04-29最新谷歌fonts公共资源，解决引入fonts.googleapis.com/css字体网页响应缓慢问题
06-25 1万+
昨天搭建了个最新版本WordPress 5.7.2版本，访问后台发现速度特别慢，前台页面打开也出奇的慢，于是就问了度娘和CSDN前辈，结果一大堆说要找好服务器啦、图片优化啦、换成fonts.useso.com啦、把fonts.googleapis.com换成fonts.cat.net啦、统统没用， 因为我服务器高配，其他网站程序速度飞快，新站基本上没什么图片，访问后台又能有什么图片，这个问题排除，还有360等提供的CDN加速也过期了，由于某些众所周知的原因，好多开源的 JS 库采用的国外 CDN 托管..
vue项目中使用特殊字体的步骤
发渐稀的博客
09-14 422
然后把该文件放到src -> assets -> fonts -> 目录下，并在当前目录里新建一个fonts.css文件，把字体文件在该文件中声明。在项目中使用特殊字体，需要注意，所使用的特殊字体是否被允许商用或是个人开发，以及如何使用，切记不要侵权。首先需要在对应字体网站下载字体文件，取出里面后缀名为.ttf的文件。再然后就在main.js文件中全局声明fonts.js文件。最后在需要使用特殊字体的地方直接引用即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值