浏览模式: 标准 | 列表分类:Javascript
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
| 阅读:1042
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
| 阅读:469
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
| 阅读:477
Submitted by gouki on 2023, September 13, 10:41 PM
在使用 phpstorm/webstorm 进行前端开发的时候,一般会设置 alias,比如@,但在 IDEA 中,如果项目是 vite/vuejs 的时候 ,无法识别路径。
网上教程很多,什么设置.eslintrc.js / jsconfig.json / tsconfig.json 之类的,但其实重启 IDE 后仍然无法识别。
查了一下资料,原来目前 phpstorm 对@的 alias,只支持 webpack,也就是说,如果你的前端项目是 webpack 的,其实是能够识别的。因此,只要在项目根目录下,随便建一个文件,尽量不要叫 webpack.config.js,以防被项目自动识别。你可以建一个 alias.config.js,内容如下:
JavaScript代码
- const path = require("path");
- module.exports = {
- resolve: {
- alias: {
- '@': path.resolve(__dirname, 'resources/js'),
- '~': path.resolve(__dirname, 'resources')
- }
- }
- }
看到这个 resource/js 就知道当前是在 laravel 项目下面了。
在 Ide 的 setting中 :
Languaes & Frameworks > Javascript > Webpack ,选择手动,指定 alias.config.js ,确定后,再打开 *.vue 文件,会发现原来的 import 文件都能够自动识别了。
Tags: vite, laravel, webpack, phpstorm, webstorm
Javascript | 评论:0
| 阅读:1115
Submitted by gouki on 2023, September 12, 11:39 PM
解决 tailwindCss 与 elementUI 最简单办法就是
1、在 app.js(或main.js)中,先加载 tailwindCss 再加载 elementUI 和相关 css
2、在 tailwind.config.js 中,plugins节点下,增加:
JavaScript代码
- plugin(function ({addBase}) {
- addBase({
- ".el-button": {
- "background-color": "var(--el-button-bg-color,val(--el-color-white))"
- }
- })
- }),
说白了,就是继续针对 el-button 重新赋值。
再打开页面就完全正常了。
Javascript | 评论:0
| 阅读:1357