浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2024, October 7, 10:51 AM
小程序里自定义字体实话实说是一件很痛苦的事情。如果为了好看，只弄英文字体硬实还没那么让人纠结，但事实上中文才是让人最头疼的。一个正常的中文字体少说8M左右，如何字库全一点的。20多M也不是不可能。放进APP可能还能接受，但放到小程序，好吧，直接放不下。
所以网上就有各种不同的工具，而且小程序也支持引入全部字体，常见的方法就是那么几种
1、非中文字体，比如图标，直接用iconfont，因为他支持网络字体和本地字体两种，如果不大就本地字体吧
2、英文，转成woff后，估计也没多少了，毕竟正常使用也就26个英文字母+10个数字，再不济加上一些标点符号。ASCII的可见字符基本上就可以在正常的页面里全部使用到了
3、中文，这才是大头，之前写过一篇：
字体转换相关 ，但其实现在想想，这个有点偏手动了。
所以针对3，我们需要重新整理一下，原贴里的sfntool仍然需要，但这个工具有个小缺点，即不支持woff2，但也有个优点，即eot可以压缩，这样的话，处理英文字体就可以更小了。
处理中文分这么几步
1、获取项目中所有出现的中文，比如src目录下，针对vue/js/ts/jsx/tsx等文件，忽略css文件和图标等，将中文取出来去个重（不去也影响不大）。这个脚本可以自己写也可以用网上的一些开源库，象字蛛之类的。如果懒得找，问一下狗屁通，估计就能直接写了
2、传入sfntool中，生成相应的字体，目前看来，如果不压缩，woff会是比较小一点的
3、最重要的就是这一步，有多种处理：a.如果字体不大，就直接扔static里，建一个font.scss就行；b.如果字体不是太大，比如只有7、80K，可以考虑base64一下在font-family的url里，直接用base64；c.如果超过80K以上，建议直接上传到CDN去，毕竟这玩意其实还没有小程序的素材大，现在哪个图片不是要上百K的？
在这样的基础下，再利用package.json创建一个命令，就可以一键生成了，比如我现在就是这样，类似：java -jar sfntool.jar -s "$(node chinese.ts)" infile outfile && node base64.ts && node font-upload.ts
只是一个简单的描述处理方式 ，其实都可以在base64.ts里进行判断和处理，但基于一事一做的原则还是多拆开了。
字体处理就是这样，说方便也方便说复杂也复杂。
Tags: chatgpt, sfntool
Javascript | 评论:0
| 阅读:1147
Submitted by gouki on 2024, June 29, 1:28 PM
在编译前端项目的时候报错：FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
真的是第一次遇到，PHP 就不会出现这种问题，哈哈
内存还是小了点。然后估计我还是要清理和合并掉一些包，不然在小内存（1G）的机器上估计还会有问题。
小内存的机器看来可以利用 git 的 action，在编译好之后把构建复制过去，也是个办法。
Javascript | 评论:0
| 阅读:1918
Submitted by gouki on 2023, December 22, 9:22 PM
小程序里最烦人的就是自定义字体了。设计师们总喜欢用一些看起来很好看的字体。但对于小程序来说简直是个灾难。
所幸，如果是英文字体的话，一般都只有8~10K，但那些 OTF 其实还是很大，而且不少字体中有一些特殊的符号，比如@这些。但事实上很多时候我们都不需要。所以这时候就要转换一下。。。
1、convert OTF to TTF
2、用 sfnttools.jar 包（网上都是这个名儿）。来进行转换，类似 java -jar sfnttool.jar -s '内容，也可以是文件' 源字符.ttf 生成的.ttf
3、如果字体还大于50K 的话，转换成 base64
4、如果小于50K，直接就可以引用了。。。。
大致这样。。
1、https://cloudconvert.com/otf-to-ttf
2、https://www.giftofspeed.com/base64-encoder/
参考：https://blog.zengrong.net/post/font_trim_replacement_converting/
jar 包的详细用法可以直接命令行看
XML/HTML代码
- java -jar sfnttool.jar -h
- subset [-?|-h|-help] [-b] [-s string] fontfile outfile
- prototype font subsetter
- -?,-help print this help information
- -s,-string string to subset
- -b,-bench benchmark (run 10000 iterations)
- -h,-hints strip hints
- -w,-woff output woff format
- -e,-eot output eot format
- -x,-mtx enable microtype express compression for eot format
Javascript | 评论:0
| 阅读:3535
Submitted by gouki on 2023, December 15, 3:06 PM
在用 antv 的 modal 对话框时，你会发现弹出来的框有一个很大的边框，打开 css 会找到 ant-modal-content 这个 class。如果你直接 加这个样式 padding: 0，或者 :deep(.ant-modal-content){padding: 0 }你会发现都不起作用
即使，即使你用了 important 也还是不起作用
这时候 看浏览器工具栏的右侧，会有类似 :where(xxxx) .ant-modal-content 这样的样式，也就是说他本身就是一个伪类，如果你直接对它操作是不起作用的。
网上找了很多资料。最后找到说，其实他有一个 wrap-class-name 的属性。用了这个属性后，整个对话框里的样式就可以跟着这个外层类走了。因此设定：<a-modal wrap-class-name="wrap-modal" ></a-modal>
再添加样式：
XML/HTML代码
- .wrap-modal{
- .ant-modal-content{
- padding: 0!important;
- }
- }
再次看弹窗。一切正常啦 ~
Javascript | 评论:0
| 阅读:2694
Submitted by gouki on 2023, December 10, 11:35 PM
一般来说象这种效果实现还是比较有意思的
在文字下层加上一定高度的背景色，半透明，而且模糊。。。
话不多说，上代码：
CSS代码
- .text_bg {
- display: inline-block;
- position: relative;
- z-index: 1;
- }
-
- .text_bg::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 40%;
- background-color: #B6D16F;
- opacity: .7;
- z-index: -1;
- filter: blur(1px);
- }
上述代码中最重要的其实就是那两个z-index。否则你会发现背景色其实压在了文字上方。
其他的基本上都是基本操作，只是额外用了一个:after的伪类。在当前这个例子里。用before和after的最终显示效果其实是一样的
Javascript | 评论:0
| 阅读:2788
