呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#书摘 #css #前端
《CSS 世界》关于 word-break 和 word-wrap
1. 首先了解一下word-break属性，语法如下：
-
-
-
2. 接下来是 word-wrap
-
word-wrap 之前由于和 word-break 长得太像，难免会让人记不住或搞混，于是在 CSS3 规范里，这个属性的名称被修改了，叫作 `overflow-wrap`。这个新属性名称显然语义更准确，也更容易区别和记忆。但是，也就 Chrome 和 Safari 等 WebKit 或 Blink 浏览器支持这个新属性。因此，虽然换了个好看好用的新名字，为了兼容性，目前还是乖乖地使用word-wrap吧。(我说怎么这俩一样)
3. 区别：
word-break:break-all 的作用是所有的都换行，毫不留情，一点儿空隙都不放过，而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。
《CSS 世界》关于 word-break 和 word-wrap
1. 首先了解一下word-break属性，语法如下：
word-break: normal;
word-break: break-all;
word-break: keep-all;
-
normal ：使用默认的换行规则。-
break-all ：允许任意非 CJK（Chinese/Japanese/Korean）文本间的单词断行。-
keep-all ：不允许 CJK 文本中的单词换行，只能在半角空格或连字符处换行。非 CJK 文本的行为实际上和 normal 一致。
break-all keep-all 就不这样了，虽然有一定的发展和进步，但目前移动端还不适合使用 word-break:keep-all 。 另外，Chrome、Safari 以及其他 WebKit 或 Blink 浏览器还支持非官方标准的 break-word 值，其表现就和 word-wrap:break-word 一样，这个知识了解一下即可。2. 接下来是 word-wrap
word-wrap: normal;
word-wrap: break-word;
normal ：就是大家平常见得最多的正常的换行规则。-
break-word ：一行单词中实在没有其他靠谱的换行点的时候换行。word-wrap 之前由于和 word-break 长得太像，难免会让人记不住或搞混，于是在 CSS3 规范里，这个属性的名称被修改了，叫作 `overflow-wrap`。这个新属性名称显然语义更准确，也更容易区别和记忆。但是，也就 Chrome 和 Safari 等 WebKit 或 Blink 浏览器支持这个新属性。因此，虽然换了个好看好用的新名字，为了兼容性，目前还是乖乖地使用word-wrap吧。(我说怎么这俩一样)
3. 区别：
word-break:break-all 的作用是所有的都换行，毫不留情，一点儿空隙都不放过，而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。
之前不是搭了memos 吗，我发现还有挺多配套的东西，比如如图的ios客户端和安卓上的：
- Moe Memos - 适用于 iOS 和 Android 的第三方客户端
- lmm214/memos-bber - Chrome 扩展
- Rabithua/memos_wmp - 微信小程序
- qazxcdswe123/telegramMemoBot - 电报机器人
- eallion/memos.top - 使用 Memos API 呈现的静态页面
- eindex/logseq-memos-sync - Logseq 插件
- JakeLaoyu/memos-import-from-flomo - 导入数据。来自flomo、微信读书的支持
- 发送到备忘录- iOS 的快捷方式
- 备忘录 Raycast Extension - Raycast 扩展
- Memos Desktop - 适用于 MacOS 和 Windows 的第三方客户端
- MemosGallery - 使用 Memos API 呈现的静态图库
详情请看这篇：Memos：私有、轻量、开源、自托管的备忘录
已经用上了，好舒服
《CSS 世界》font-face 中的src
「接下来解答#iefix有什么用的问题。实际上，#iefix是没什么用的！“你在开玩笑吗？”没有，这里的#iefix 确实没什么用，真正有用的其实是前面的问号。IE9之前的版本解析有一个严重的问题，当src属性包含多个 url()时，会把长长的字符当作一个地址解析而返回 404 错误。
因此把 eot 格式放在第一位，然后在字体文件 url 地址后加上问号，这样IE9之前的版本会把问号之后的内容当作 url 的参数。好吧，#iefix 严格来说还是有点儿用的，它可以让请求地址短一些，因此请求地址是不包括锚点标志#及其后面的内容的。
如果按照这种说法，那岂不是说iefix 这几个字符多余？没错，多余！不懂的人不知道是干什么用的，懂的人知道它是没什么用的，因此多余。」6
最后的问题是：format()功能符有什么作用，可不可以省略？我的回答是最好不要省略。format()功能符的作用是让浏览器提前知道字体的格式，以决定是否需要加载这个字体，而不是加载完了之后再自动判断。
于是，综合上面的全部知识会发现，业界常用的这套东西，其实可以优化成下面这样：
@font-face {
font-family: ICON;
src: url('icon.eot');
src: local('☺'),
url('icon.woff2') format("woff2"),
url('icon.woff') format("woff"),
url('icon.ttf');
}
有一种一周瘦10斤的感觉。
#书摘 #css #前端
《CSS 世界》font-family 等宽字体的好处
1. 等宽字体利于代码呈现
2. ch和em、rem、ex一样，是CSS中和字符相关的相对单位。和ch相关的字符是0，没错，就是阿拉伯数字0。（第一次听说）
- 1ch表示一个0字符的宽度，所以6个0所占据的宽度就是6ch。 但是我们网页内容的字符不可能都是 0，所以这个单位乍看就显得很鸡肋。但是，如果和等宽字体在一起使用，它就可以发挥不一样的威力
- 例如，有些输入框是输入手机号的，在中国，手机号是 11 位，因此我们可以设置该输入框宽度为 11ch，同时让字体等宽，则用户一眼就能看出自己是否少输入或者多输入了 1 位数字。又如，我们想实现一个屏幕上代码一个一个出现的动效，如果代码是等宽字体，此时使用 ch 单位来控制宽度，配合 overflow 属性和 CSS animation就能在完全不使用JavaScript的情况下将此效果模拟出来。
《CSS 世界》font-family 等宽字体的好处
1. 等宽字体利于代码呈现
2. ch和em、rem、ex一样，是CSS中和字符相关的相对单位。和ch相关的字符是0，没错，就是阿拉伯数字0。（第一次听说）
- 1ch表示一个0字符的宽度，所以6个0所占据的宽度就是6ch。 但是我们网页内容的字符不可能都是 0，所以这个单位乍看就显得很鸡肋。但是，如果和等宽字体在一起使用，它就可以发挥不一样的威力
- 例如，有些输入框是输入手机号的，在中国，手机号是 11 位，因此我们可以设置该输入框宽度为 11ch，同时让字体等宽，则用户一眼就能看出自己是否少输入或者多输入了 1 位数字。又如，我们想实现一个屏幕上代码一个一个出现的动效，如果代码是等宽字体，此时使用 ch 单位来控制宽度，配合 overflow 属性和 CSS animation就能在完全不使用JavaScript的情况下将此效果模拟出来。
