fix font-size setting; upgrade source mode

Higurashi-kagome commented 3 years ago

尝试解决或完善：

自定义字体大小效果不佳的问题（#16）

首先，单独设置 <html> 的字体大小：

Details

```CSS html{ font-size: 14px; } ```

然后，相关字号由 px 或 % 改为 rem。同时，因自定义字体大小后会造成待办偏离位置，所以修改待办偏移为translateY(-0.46rem);：

Details

```CSS #write input:not(#md-grid-width):not(#md-grid-height) { transform: translateY(-0.46rem);/*修改为 rem*/ } ```

源代码模式

首先是完善源代码模式下的代码字体：

Details

```CSS #typora-source .CodeMirror-code pre, .cm-s-typora-default .cm-overlay{ font-family: 'Cascadia Code', Consolas, 'Noto Sans SC', 'Courier New', "微软雅黑", 'Microsoft YaHei', "华文细黑", STXihei; } ```

然后发现源代码模式的类名、运算符等的颜色与背景色相近：

Details

![image](https://user-images.githubusercontent.com/51501079/101315865-61ae6100-3896-11eb-84f9-9ee02b9af61e.png)

这是因为预览模式下的代码样式影响了源代码模式下的代码样式，所以一方面通过添加 #write 将样式限制在预览模式下，另一方面从 codemirror/theme/ 获取 3024-day.css 作为源代码模式下的高亮主题。

再就是源代码模式中也存在 行内代码 中文字体显示不佳的问题，所以添加了：

Details

```CSS .cm-s-typora-default .cm-comment{ font-family: 'Cascadia Code', Consolas, 'Glow Sans SC', 'Courier New', "微软雅黑", 'Microsoft YaHei', "华文细黑", STXihei; } ```

公式块字体

公式块中的字体应该与 pre 标签的字体一致：

Details

![image](https://user-images.githubusercontent.com/51501079/101315908-71c64080-3896-11eb-810e-53a637108a9f.png)

所以将代码完善为：

Details

```CSS code, pre, #write .md-mathblock-input { font-size: 0.95rem !important; font-weight: normal; font-family: 'Cascadia Code', Consolas, 'Glow Sans SC', 'Courier New', "微软雅黑", 'Microsoft YaHei', "华文细黑", STXihei; -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial } ```

HanryYu commented 3 years ago

@liuhao326 效率有点高😂👍

Higurashi-kagome commented 3 years ago

哈哈，还好吧😀 @FishionYu

HanryYu / typora-blubook-theme

fix font-size setting; upgrade source mode #34