这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。
今天在优化主题的时候遇到的问题，发现字体文件的体积实在是太大了，即便是使用了cdn作为缓存，但是加载的时间还是过于久，会导致拖慢了全站的加载速度，于是便将字体样式通过异步加载的形式，让其不拖慢网站的加载速度。
font-family: PingFangSC-Regular, PingFang SC; 如上设置，答案是没有一点效果的。 因为真机调试的时候，手机是不带PingFang 字体的。
我们上一节讲了插值，主要是针对DOM的文本节点操作。那么如果现在有个需求，我们需要点击按钮，更换图片，怎么办？或者我们需要更换一下元素的样式该怎么实现呢？
最近，Next.js 大会介绍了 Next.js 13，一个 React App 框架的最新版本。Next.js 13 希望通过提供创新的特性帮助开发人员开发出“动态无限制”的 App，其中许多特性仍处于 alpha 或 beta 阶段。新特性对编译器、路由和渲染基础设施进行了更新，并改进了组件工具包。
rem:参考的是根元素（html）字体大小 （统一的，一个页面只有一个html）
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
引入魔改样式的方法很简单，自建一个css文件，然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件，然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
当然不止能绑定src也能绑定其他属性,属性前加冒号就可以,就像 :src :href
自从多年前刚入行的时候，中文自定义字体在网页上差不多只有一种存在，那就是“图片”。因为中文字体的体积实在太大了，还存在各种问题，这多多少少限制了中文网页在设计上的发展，但是人们也没有停下寻找解决方案的脚步。比如前nodejs时代的各种GUI工具，nodejs时代的fontmin、font-spider（字蛛）... 目前来说，最方便的要数font-spider（字蛛）了，发布的时候也震惊中外。它可以自动提取网页里面使用的自定义字体的文字，并且输出多终端兼容。在大多数不需要兼容IE7（大部分IE8还是网吧客户
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。
==font-spider 仅适用于固定文本，如果文字内容为动态可变的，新增的文字将无法显示为特殊字体。==
通过一段时间的运行，发现即使将网站的字体文件（dotted2MB，soft4MB）放到CDN加载依然很慢，而且流量跑的飞快！不得已开始寻找压缩字体的方式，最终找到了font-spider这个工具，可以依据html文件，将用到字体的字给单独提取出来打包成小的字体包，貌似只支持ttf格式的字体文件。
每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含
反爬方与爬虫方相互博弈，不断制造爬取难度，或一定程度上阻止了爬虫行为。爬虫方也在不断更新技术，来对抗种种反爬限制。
最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题，后来查找很多解决方案，最后决定用PDF.js的方式来实现
一.背景 前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案 1.使用photoshop将文本图层单独导出成图片; 2.直接引入改字体的字体库.ttf文件 首先第一种方案的缺点,使用图片代替文字,制作和维护的成本很高,前期切图,合并雪碧图比较繁琐,后期修改和维护更是麻烦.同时使用图片,会带来更多的宽带消耗.用户体验方面,用户无法进行文字的选择,复制等操作,体验也不好. 第二种方案,解决了上述的一些问题,但是由于汉字数量太大,导致中文字体文件也较大,通常都会有几M
在开发小程序的时候，尤其是开发第三方小程序，我们作为开发者，只需要开发一套模板，客户的小程序对我们进行授权管理，我们需要将这套模板应用到对方的小程序上，然后由我们进行发版审核即可；
在上篇文章 探究网页资源究竟是如何阻塞浏览器加载的 中介绍到 JS 会阻塞 DOM 的加载，样式会阻塞页面的渲染，外链样式里的自定义字体还会对文字造成闪动给用户带来不好的体验，诸如此类问题还有挺多，那到底该如何解决它们呢？
预期：any (with argument) | Object (without argument)
从 2012 年开始，H5 成为 html 最后一个稳定版本，不再兼容之前的 API，从此诞生的每一个新 API，一旦结束试验期将永远存在，2015 年 ES6 的出现又淘汰掉一堆 JavaScript 框架，再结合 CSS3，前端原生 API 已经可以替代任何脚手架和打包工具，本文介绍使用原生代码替代前端流行框架的解决方案：分析框架提供的每一个特性以及相对应的原生替代品。
最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。
1、域名配置，不配置无法访问 小程序开发，要调用API，就必须把域名填写在配置里面，这点儿一定要记住，万一服务端突然上线一次，发现线上服务出问题了，很有可能就是域名没有配置。 2、默认宽度 小程序中推荐使用rpx做为单位（当然你用px和em照样起作用），默认页面宽度是750rpx，所以，UI同学在给设计稿时，建议也是这个尺寸。 3、图片预览地址必须是http地址 小程序可以引用相对路径的图片，但是，需要预览，下载时，请一定要作用http地址，否则无效。 wx.previewImage({ curren
移动端布局中，童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。
这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。 这个列表包含许多种类的资源，所以这里我将它们分组整理。 Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js
该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能，精简了不常用的配置。默认将 vw 作为优先单位使用，以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem，这款插件很好的解决了该问题。
fontClass 支持字体的样式定义，但不支持多色字体，兼容性良好，当要替换图标时，只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。
一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。
思路：初始化currentIndex为0，用作记录第0个li的位置，后点击哪个li，就把该li的位置赋给cuurentIndex
爬虫是 Python 的一个常见应用场景，很多练习项目就是让大家去爬某某网站。爬取网页的时候，你大概率会碰到一些反爬措施。这种情况下，你该如何应对呢？本文梳理了常见的反爬措施和应对方案。
大家都知道转换px单位的插件很多，著名的有postcss-px-to-viewport和postcss-pxtorem，前者是将px转换为vw，后者是将px转换为rem，简化了不常用的配置。将成为vw优先单位，以rem为退货模式。考虑到vw在移动设备上的支持不如rem，这个插件很好的解决了这个问题。然后简单介绍一下。
api/match/7返回的json数据，里面data数组有10个字体（胜点） 和 woff文件的地址。
考虑添加 preconnect 或 dns-prefetch 资源提示以建立与重要第三方来源的早期连接。
| 导语 听说你的小游戏内存超标？进来了解一下吧。 本文主要跟大家一起来探讨一下Cocos Creator小游戏开发过程中内存优化、性能优化和包体优化。 一、内存优化 因为 iOS小游戏和微信共用同一个进程，而微信在连续两次收到系统内存警告的时候会关闭小游戏并释放小游戏占用的内存。如果你的小游戏有外网用户反馈“闪退”，或者你自己测试的时候频繁出现“该小程序可能导致微信响应变慢被终止”等提示，那么就应该是时候优化你的小游戏内存了！ 1、优化双份纹理（必做！） 在你的项目中添加如下代码，就可以减少大
@media mediatype and | not lonly (media feature) {
第二个是。window.c的值。。这里因为代码无法格式化。。踩了没调试的坑。此处必须注意！！
因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。
rem 是基于 html 元素的字体大小来决定，而 em 则根据使用它的元素的大小决定,一般被称为相对长度单位,是根据它父元素的字体大小来计算的，一般默认情况下：16px = 1em
听说糙着干活的只靠 px 和 % 闯天下，不知道在看文章的你是不是也是其中一员，哈哈哈哈
最近看到不少文章教大家用 photoshop 实现抖音的 logo 跟字体，我也非常喜欢这种风格的字体，于是趁着晚上的时间，动手用代码实现了下此类风格的字体特效，顺便开发了个小工具，地址见文末。本文主要是从艺术手法和 JS 前端实现 2 个方面进行梳理，我们可以看到如何用代码来描述艺术手法，达到自动化生成某一风格作品的目的。 我们先了解下抖音的这种 logo 的艺术风格。抖音 logo 这种设计手法，是故障艺术 Glitch Art 中的“错位”。故障艺术还有燥波、失真、毛刺等等其他设计手法。 Gl
Lighthouse 是用于测试网页性能工具最有用的技术之一。它具备了自动化，并可以测量网站的可访问性和 SEO。更重要的是，它目前是开源的并且可以免费使用。同时，它可以用来测试渐进式 Web 应用程序。
因为 Python 语法简介以及强大的第三方库，所以我们使用它来制作网络爬虫程序。网络爬虫的用途是进行数据采集，也就是将互联网中的数据采集过来。
本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。
JavaScript技术 1.DOM相关知识 什么是DOM:Document Object Model，文档对象模型 文档：指的是标记型文档(html,xml) 对象：可以使用dom里面的相关属性和方法来解析标记型文档。 Dom的组成：核心Dom，Html Dom，XML Dom。 Dom如何解析html文档：
最近看到不少文章教大家用 photoshop 实现抖音的 logo 跟字体，我也非常喜欢这种风格的字体，于是趁着晚上的时间，动手用代码实现了下此类风格的字体特效，顺便开发了个小工具，地址见文末。本文主要是从艺术手法和 JS 前端实现 2 个方面进行梳理，我们可以看到如何用代码来描述艺术手法，达到自动化生成某一风格作品的目的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
