首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >解决css引用字体跨域问题

解决css引用字体跨域问题

作者头像
青梅煮码
发布于 2023-01-16 05:45:33
发布于 2023-01-16 05:45:33
2.4K10
代码可运行
举报
文章被收录于专栏:青梅煮码青梅煮码
运行总次数:0
代码可运行

解决方案就是将文字设置为 base64 编码

字体转base64编码网址:https://transfonter.org/

具体步骤如下:

打开刚刚我们经过转换的解压出来的文件,找到stylesheet.css,复制 里面内容

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@font-face {
    font-family: 'my-icon';
    src: url(data:font/truetype;charset=utf-8;base64,xxxx...) format('truetype');
    font-weight: normal;
    font-style: normal;
}

替换原来的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@font-face{
    font-family:my-icon;
    src:url(../font/iconfont.eot?v=240);
    src:url(../font/iconfont.eot?v=240#iefix) format('embedded-opentype'),
    url(../font/iconfont.svg?v=240#iconfont) format('svg'),
    url(../font/iconfont.woff?v=240) format('woff'),url(../font/iconfont.ttf?v=240) format('truetype')
}

在强制刷新浏览器就可以了,注意清除缓存

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-10-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
没啥用我的评价是,不如直接换个格式
没啥用我的评价是,不如直接换个格式
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
css实现返回顶部,实现返回顶部效果
注意那个箭头不是使用的图标,而是使用的一个字体样式(layui-icon)去实现的
全栈程序员站长
2022/09/14
2.5K0
css实现返回顶部,实现返回顶部效果
第104天:web字体图标使用方法
  注意:新版iconfont支持多色图标,这些多色图标在Unicode模式下将不能使用,如果有需求建议使用Symbol的引用方式
半指温柔乐
2018/09/11
1.7K0
第104天:web字体图标使用方法
小程序如何引入外部字体(方法详解)
今天做app时,用到了外部字体,很简单的就是把TTF文件放在工程下,生出来个疑问,小程序如何引入外部字体呢?百度一下 发现比较好用的字体图标库,1.阿里巴巴矢量图标库,2.http://transfo
honey缘木鱼
2018/06/19
11.5K0
使用纯CSS给网站文章中的外链添加小图标
最近突然有一个想法,文章中的链接不够明显,可不可以在不修改类名的前提下,给所有 a 标签添加一个图标呢?
德顺
2020/09/19
2K0
无图片字体icon
W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其实挺多,但一直懒于写blog,也经常会出现一些知识点重复去查询,一些知识点难以及时分享与讨论。ADT团队在不断的成长与壮大中,于是鞭策自己尽量多的习惯去记录,也为了知识更好的分享与积累吧。 现在来看,应该大家都接触过css3的自定义字体(@font-face),也应该知道各个浏览器都支持(包括IE6),只是各自对字体文件的格式的支持不一样。 为什么要
逸鹏
2018/04/11
2.8K0
无图片字体icon
web字体规范
对于设计稿的解析中,肯定是有些设计稿有特殊的字体,而这些字体可能只有设计师才有,或者只有前端拓展了系统字库才能显示器正确效果。但对于前端页面的终极使用者,他们可能系统没有这些字体,那么对于这些特殊字体究竟该如何处理? 本文通过与设计,产品,前端的统一沟通,达成共识如下。请各个前端 按照这个原则去对应的解析实现设计ui效果。
RobinsonZhang
2018/08/28
3.1K0
web字体规范
前端开发:项目引入vue-easytable时报错These relative modules were not...的解决方法
前段时间在开发基于移动端的前端项目的时候,遇到一个使用table的需求,但是基于移动端的Vant框架的组件库里面没有table相关的组件支持,这就需要借助第三方组件来实现基于移动端的table功能。基于移动端的table的第三方组件有一个使用起来比较方便的组件:vue-easytable,该组件从集成到使用也都很简单,但是会遇到一个致命的问题,那就是本文所要分享的内容。
三掌柜
2022/04/12
2.4K0
前端开发:项目引入vue-easytable时报错These relative modules were not...的解决方法
Iconfont在教育平台的实践
IMWeb前端团队
2018/01/08
1.9K0
Iconfont在教育平台的实践
字体图标iconfont的使用
fontClass 支持字体的样式定义,但不支持多色字体,兼容性良好,当要替换图标时,只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。
leader755
2022/03/09
4.7K0
字体图标iconfont的使用
iconfont的使用方法
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
全栈程序员站长
2022/11/17
1.2K0
iconfont的使用方法
iconfont字体图标库
HTML5学堂小编的话:昨日发布的iconfont的内容有些不足,对于可能不太了解iconfont和特殊字体的学习者来说,可能会存在一定的理解问题,在此针对昨日内容进行补充,详细讲解。 字体相关知识 了解iconfont(字体图标)前我们先了解下字体,因为iconfont的实现与字体息息相关,所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course
HTML5学堂
2018/03/13
5.8K0
iconfont字体图标库
【前端攻略--HTML/CSS】边框、文字效果与字体图标实例介绍
字体:实际上是长得像图标的字体,占用的空间小,消耗的带宽小,能够更快的显示页面。字体是矢量的,所以不会失真,可以按照字体一样设置字体颜色和大小。
野原测试开发
2019/07/10
2K0
React中,在styled-components基础上使用iconfont字体图标
提取下载的字体文件到项目的src>assets>fonts文件夹中(当然可以根据你的项目决定其他的路径)
xing.org1^
2020/03/09
4.1K0
React中,在styled-components基础上使用iconfont字体图标
把图片变成字体,然后在引入到网页
首先是字体:如果把想要的字体引入到网页。 第一步:下载字体文件,一般下载到的是.TTF文件,只有一个文件。 第二步:把下载的字体,转换为其他格式,一般为了解决兼容性需要4-到5种文件格式,转换字体文件的程序比较多。比如这个网站http://www.freefontconverter.com/,都是免费转换一下。 第三步:把字体文件放在项目工程目录下,引入, @font-face { font-family: 'a';/*这个地方设置字体的名称*/ src: url('font2/cynicalhill
前朝楚水
2018/04/02
2.1K0
CSS3魔法堂:认识@font-face和Font Icon
一、前言                                过去我们总通过图片来美化站点的LOGO、标题、图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式。 二、看看例子                            /* 定义 */ @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src:
^_^肥仔John
2018/01/18
2.5K0
CSS3魔法堂:认识@font-face和Font Icon
3-4 使用loader打包静态资源(样式篇下)
上一节我们学习了,webpack如何打包样式文件以及如何自动添加前缀。本节我们继续学习如何打包@import引入的样式文件,css模块化以及如何打包字体文件。
love丁酥酥
2019/07/01
9090
3-4 使用loader打包静态资源(样式篇下)
@font-face css3自定义个性化字体
使用第三方平台转换字体文件为font-face所支持的格式。 TureTpe(.ttf)格式   支持浏览器:IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+ OpenType(.otf) 格式   支持浏览器:Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+ Web Open Font Format(.woff) 格式   支持浏览器:IE9
用户1197315
2018/01/22
1.2K0
CSS3与页面布局学习总结(五)——Web Font与Sprite
一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系统后,会默认安装一些字体,这些字体文件描
张果
2018/01/04
2.5K0
CSS3与页面布局学习总结(五)——Web Font与Sprite
CSS使用字体新姿势 unicode-range用法与使用场景
现在想要在CSS中使用自定义字体或者第三方字体,是一件非常简单的事情,只需要简单的使用@font-face规则即可导入各种字体文件。
零式的天空
2022/03/28
3.2K0
CSS3文本与字体
兼容性:IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+
Leophen
2019/08/23
1.7K0
相关推荐
css实现返回顶部,实现返回顶部效果
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验