Web/16-前端综合/2022年-前端日记.md
2023-05-17 09:28:56 +08:00

67 lines
2.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

### 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)