如何通过CSS的@font-face属性实现在网页中嵌入任意字体

发布时间:2022-03-07 14:43:35 作者:iii
来源:亿速云 阅读:102

本文小编为大家详细介绍“如何通过CSS的@font-face属性实现在网页中嵌入任意字体”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何通过CSS的@font-face属性实现在网页中嵌入任意字体”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

  美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:

  1. 不可能大范围的使用该字体;

  2. 图片内容相对使用文字不易修改;

  3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素)。

  网络上有一些使用sIFR技术、或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。

  外部字体怎么添加?

  我wxss里添加了 @font-face 代码,一般来说应该支持的,但还是不支持。 如下:

  [mw_shl_code=css,true]

  @font-face {

  font-family: '字体名称';

  src: url("../../resources/font/UKIJTuzTom.eot");

  font-weight: normal;

  font-style: normal;

  }

  [/mw_shl_code]

  暂时没有想到其他好的方式,就先用如下方式解决了{:5_1373:}

  微信小程序 @font-face 里 添加url地址没用, 所以 URL地址替换掉 base64 编吗实现。

  1. 先外部字体准备好。 比:(UKIJTzTr.ttf 维吾尔语UKIJ字体)

  2. http://transfonter.org/ 网站里 上传字体,选择base64 编吗 ,fotmat后下载 。

  3. 下载包里有个 style文件 打开后 代码可以添加到WXSS里 。

读到这里,这篇“如何通过CSS的@font-face属性实现在网页中嵌入任意字体”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. CSS3 Web嵌入字体
  2. css中@font-face属性的使用方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css @font-face

上一篇:微信小程序基本功能审核规范有哪些

下一篇:微信开店小程序有什么运营渠道

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》