Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederzhangxinxu.com
张鑫旭-鑫空间-鑫生活
Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.
Follow now 173 followers
Latest posts
Last updated 10 days ago
不要搞混了，不是text而是CSS font-size-adjust属性
10 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11527 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 介绍一个前端新特性，CSS font-size-adjust属性，语法还有些小复杂，研究了下，怎么说呢，非常细节的一个CSS属性，设计的初衷是解决一个小众的问题场景。 一、不同字体下的字形大小问题 我们给一段文字设置同样大小的字号，要是字体的类型不同，那么呈现的大小就会有明显的不同。 例如，中文字体中的楷体就比雅黑和苹方字体显得小，英文字体中的Times字体就比Verdana字体显得小。 为了让整体字体下的视觉表现接近，于是就设计了font-size-adjust这个CSS属性，可以指定字体的尺寸。 参见下面的代码和截图示意：...
JS Set新支持了intersection, union, difference等方法
12 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11522 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 继续介绍前端前沿新特性，今天讲的是Set或者类似Set的数据新支持的若干方法，主要是交集、合集以及差异判定相关，API较多，一个一个来。 一、intersection交集 单词’intersection’就是交叉，交集的意思。 用数学公式表示就是： A∩B={x∊A∣x∊B}A\cap B =...
JS Array数组新的with方法，你知道作用吗？
16 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11519 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、不改变原数组进行设置 先看使用场景。 在过去，我们修改某个数组项，通常会使用索引值进行设置，例如将数组的第2项修改为某某电影名称： const arr = ['魔童闹海',...
JS原生的深拷贝API structuredClone函数简介
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11509 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、开门即见山 目前，Web浏览器提供了原生的Object对象深度克隆方法structuredClone()函数。 使用方法很简单，JS代码如下所示： // 创建一个具有值和循环引用的对象 const original...
如何手搓SVG半圆弧，手把手教程
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11545 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、还是先说说历史 SVG的曲线绘制在10多年前，我其实有撰文介绍过，也算是当时的热门文章了，见：“深度掌握SVG路径path的贝塞尔曲线指令”。 其中就有提到圆弧指令的绘制语法，不过这篇文章主要是讲贝塞尔曲线的，因此，圆弧指令并未多做介绍。 然后，最近遇到了一个需求，如下图所示，实现下图所示的渲染效果： 由于其中有个动态尺寸的圆环，用来表示走过的百分比进度，因此，这里使用静态的图片是不合适的，而那个动态圆环本身就是需要使用SVG实现的（一是因为端点是圆角，二是因为有路径动画），既然都A了，那B岂不就可以顺便也实现下。 因此，最终决定，总计4个圆环全部都手搓。 而手搓SVG圆环的指令是M…A…组合，具体语法如下：...
Broadcast Channel API简介，可实现Web页面广播通信
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11507 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、之前postMessage的局限 在12年的时候，乖乖，12年啊，都十几年前了，我有写过关于postMessage的跨页面通信的文章，见这里。 结果这么多年下来，在生产环境使用上述postMessage通信的机会屈指可数，这种跨页面通信平常的交互式页面是鲜有机会接触的。 然后，现在有多了个Broadcast Channel API，也是实现页面见通信的。 和十多年前的这个通信区别在于，这个是广播式的，而非点对点。...
一个新的CSS媒体查询prefers-reduced-transparency
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11505 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、为故而知新 三年前，我有介绍过渐弱动画的媒体查询prefers-reduced-motion，参见文章“你不知道的CSS media查询与用户体验”的第5小节。 使用示意： @media (prefers-reduced-motion: reduce)...
HTML select下拉框支持hr元素啦
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11503 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、hr元素与下拉分隔线 在过去，<select>下拉元素的子元素，只能是<option>和<optgroup>（下拉选项分组）元素。 而现在，<select>又多支持了一个元素，为<hr>元素。 可以在下拉选项中创建分隔线。 例如： <select is="ui-select">...
如何使用JS获取系统内存、CPU/GPU、电量等信息
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11498 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 目前，浏览器是有能力获取系统的一些信息的，包括内存大小，CPU/GPU、电量等。 一、JS获取内存大小 很简单，下面一行代码即可： navigator.deviceMemory 例如在我的Chrome浏览器控制台的输出结果就是： deviceMemory的兼容性如下截图所示，目前仅Chrome浏览器支持。 二、JavaScript...
全新的CSS相对颜色语法-使用from和calc()
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11455 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 无论是rgb()颜色函数，还是hsl()颜色函数，现在还支持一种使用from关键字的相对语法，可以基于现有的色值设置相似色或互补色。 特别适合用在hover等交互效果的实现上。 一、相对语法本质是解构 先来学习下语法，这语法看起来花里胡哨，其实很简单，一学就会。 例如，设置一个文字颜色为红色： p {...
英文单词朗读基于音素预估时长的JS算法
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11473 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 本文属于工作技术实践经验分享。 一、先说下需求背景 目前TTS语音合成技术非常成熟，再配合一些静态图片，就能轻松合成一个MP4视频。 但有个问题，字幕。 为了节约成本，一个TTS语音包含的文字往往会有上百字，不可能全部一股脑作为字幕显示，需要进行分词，有一种简单的分词方法就是在逗号等标点位置进行分割。 如下图所示： 然后播放到对应时间，显示对应的字幕，就像下面这样：...
哇哦，font-palette支持动画和palette-mix()混合函数了
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11447 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、温故而知新 在学习本文内容之前，大家有必要先了解彩色字体与font-palette属性，见此文：“超酷！CSS font-palette与彩色字体显示” 不然，本文的这些内容学习起来会比较吃力。 什么内容呢？ 介绍font-palette属性两个全新的特性，支持animation和palette-mix()函数。 其兼容性如下：...