分类 html+css 下的文章

<script type="text/javascript">
var path = document.getElementById('s4');
var length = path.getTotalLength();
console.log("Path length:", length);
</script>

矩形polygon(0 0, 100% 0, 100% 100%, 0 100%)

clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);

ScreenShot_2026-06-01_095500_543.png

4个点分别是左上xy，右上xy，右下xy，左下xy，比如左上角如果要向下，则改左上，x=0，y=3%，依次类推

时间紧、面向现代用户：选 loading=lazy。

需全兼容或复杂效果：用 lazyload 插件。

折中方案：用 loading=lazy 为主，针对不支持的浏览器引入轻量级插件：

<script>
if ('loading' in HTMLImageElement.prototype === false) {
  var script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js';
  document.body.appendChild(script);
}
</script>
<img src="your-image.jpg" alt="示例图片" loading="lazy" class="lazyload">

首先，确保你的 Node.js 版本为 12 或更高。然后使用 npm 全局安装 google-font-splitter：
npm install -g google-font-splitter

找一个空文件夹，并执行如下命令(字体下载会自动生成css文件)

google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@200;400;700&display=swap" //100~900 思源黑体

google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;500;700&display=swap" //200~900思源宋体

google-font-splitter "https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng:wght@400&display=swap" 

google-font-splitter "https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+SC:wght@400&display=swap" 

google-font-splitter "https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei:wght@400&display=swap"

google-font-splitter "https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing:wght@400&display=swap" 

google-font-splitter "https://fonts.googleapis.com/css2?family=Long+Cang:wght@400&display=swap" 

google-font-splitter "https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao:wght@400&display=swap"
  1. 1
  2. 2