Web/16-前端综合/2022年-前端日记.md

### 2022-03-30

有些 Mac 设备里，Safari 浏览器的默认字体竟然是宋体，这太奇怪了。建议在页面的 body 标签设置**字体族**的优先级，还是很有必要的：

```css
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
```

参考链接：

-   [Web 字体 font-family 再探秘 · Issue #69 · chokcoco/iCSS](https://github.com/chokcoco/icss/issues/69)

### 2022-04-27

在 flex 布局的容器里，如果发现某个子元素的尺寸与预期不符，说明这个子元素可能是被挤掉了。

解决办法是给这个子元素设置如下属性，则表示它不会被挤压：

```
flex-shrink: 0;
```

### 2022-09-26-从 html 富文本中提取纯文本（通过正则表达式）

```js
// 写法1
const text = html_str.replace(/<[^<>]+>/g, '');

// 写法2
const reg = new RegExp('<[^<>]+>', 'g');
const text = html_str.replace(reg, '');
```

参考链接：

-   [js 提取 html 字符串的文本方法总结（去 html 标签） - 掘金](https://juejin.cn/post/7020985945218351135)

### 2022-11-16-修改页面内引入的 iframe 页面内部元素的样式

参考代码：

```js
document.getElementById('ifm').onload = function () {
    document
        .getElementById('ifm') //获取到iframe
        .contentWindow //获取到iframe的window
        .document //获取到iframe的document
        .getElementById('ifmh1').style.color = 'orange'; //正常获取元素 //修改样式
};
```

注意，`iframe.contentDocument` 是 `iframe.contentWindow.document` 的简写。

参考链接：

- [修改页面内引入的iframe页面内部元素的样式](https://zhuanlan.zhihu.com/p/31296331)

- [终于搞懂了 Iframe （跨窗口通信）](https://juejin.cn/post/7127916577684471845)


### 2022-11-17-VS Code报错semi-colon expectedcss(css-semicolonexpected)的解决方法

这可能是VS Code 的一个bug。

出现这个问题, 可能并不是该条CSS语句出现问题, 而是它之前的CSS。所以请检查它之前的CSS有没有不完整或不正确的。

参考链接：[VS Code报错semi-colon expectedcss(css-semicolonexpected)的解决方法 - 话语的服侍](https://blog.class4ever.com/2943.html)