Typora 自定义主题

字体

font-family

如何自定义你的 typora 主题，以少数派为例

在 font-family 中定义了取用的字体。如果英文表达中有空格则需要引号包裹，否则不需要，会按照定义的顺序去查找字体，直到找到为止，否则取用默认字体。

这里建议先定义英文字体，再定义中文。因为中文字体中一般是含有字母的，那么会直接取用到中文的字体，英文效果比较差。

@font-face {
    font-family: 'JetBrains Mono';
  	font-style: normal;
    font-weight: 100;
    src: local('JetBrainsMonoNL-Thin'), url('misty/JetBrainsMonoNL-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 100;
    src: local('JetBrainsMonoNL-ThinItalic'), url('misty/JetBrainsMonoNL-ThinItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 200;
    src: local('JetBrainsMonoNL-ExtraLight'), url('misty/JetBrainsMonoNL-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 200;
    src: local('JetBrainsMonoNL-ExtraLightItalic'), url('misty/JetBrainsMonoNL-ExtraLightItalic.ttf') format('truetype');
}


@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 300;
    src: local('JetBrainsMonoNL-Light'), url('misty/JetBrainsMonoNL-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 300;
    src: local('JetBrainsMono-LightItalic'), url('misty/JetBrainsMonoNL-LightItalic.ttf') format('truetype');
}


@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    src: local('JetBrainsMonoNL-Regular'), url('misty/JetBrainsMonoNL-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    src: local('JetBrainsMono-Italic'), url('misty/JetBrainsMonoNL-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    src: local('JetBrainsMono-Medium'), url('misty/JetBrainsMonoNL-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 500;
    src: local('JetBrainsMono-MediumItalic'), url('misty/JetBrainsMonoNL-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: bold;
    src: local('JetBrainsMono-Bold'), url('misty/JetBrainsMonoNL-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: bold;
    src: local('JetBrainsMono-BoldItalic'), url('misty/JetBrainsMonoNL-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 800;
    src: local('JetBrainsMono-ExtraBold'), url('misty/JetBrainsMonoNL-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 800;
    src: local('JetBrainsMono-ExtraBoldItalic'), url('misty/JetBrainsMonoNL-ExtraBoldItalic.ttf') format('truetype');
}

body {
    font-family: 'JetBrains Mono', -apple-system, sans-serif;
    color: #a9b7c6;
    line-height: 1.7;
    font-weight: 200
	/* font-style: italic */
	/* font-size: 1em */
}

font-weight

100 to 900、normal、bold

100～900 来划分其字重(字体的粗细度)，与字体的字重则一一对应。并且 normal 等价于 400，bold 等价于 700。

常见的字重数值大致对应的字重描述词语:

• 100 - Thin
• 200 - Extra Light (Ultra Light)
• 300 - Light
• 400 - Normal
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

注意：bolder和lighter没有对应的数字，为什么呢？因为它们俩是相对父元素而言的。 例如：如果父元素设置的是font-weight:200; 子元素我设置为font-weight:bolder; 那么你在浏览器上查看的时候你会发 现最后显示就变成了normal的效果。因为bolder是相对父级元素而言的。同理lighter也是如此。

font-weight 设置失效

通常情况下，一个特定的字体仅会包含少数的可用字重。若所指定的字重不存在直接匹配，则会通过字体匹配算法规则匹配使用邻近的可用字重。这也就是为什么我们有时候使用特定字重时没有“生效”，看起来跟其它字重差不多的原因所在。

记录一次关于css font-weight引发的风波

我们都知道，在 css 中，可以通过 font-family 指定不同的字体，并且可以给定一个先后顺序，由字体名或者字体族名组成。当指定的的字体找不到的时候，浏览器会按照 font-family 属性指定的先后顺序寻找支持的字体。

在 CSS 中，可以通过 font-weight 属性指定了字体的粗细程度，但是不同字体支持的字重不同，比如说有些字体可能只支持400,700两个权重，如果指定的权重值不可用，浏览器需要靠字重的回退机制去解决。

如果指定的权重值在 400和 500之间（包括400和500）：

• 按升序查找指定值与500之间的可用权重;
• 如果未找到匹配项，按降序查找小于指定值的可用权重；
• 如果未找到匹配项，按升序查找大于500的可用权重。

如果指定值小于400

• 按降序查找小于指定值的可用权重。 如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。

如果指定值大于500

• 按升序查找大于指定值的可用权重。 如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。

font-weight设置了为什么没生效

字体匹配算法

选择字体的程度包括迭代由 font-family 属性所确定的字体家族、基于其他属性选择适当的字体外观以及确定指定字符对于的字形是否存在。

1. 使用指定元素上字体属性计算后的值，用户代理从由 font-family 属性所指定的字体列表中的第一个自己家族名开始。
2. 如果家族名称没有被引号括起，且它是一个通用家族名称，则用户代理查找将要使用的恰当的字体家族名。用户代理可以基于包含元素的语言或字符的 Unicode 范围选择通用字体家族。
3. 对于其他家族名称，用户代理尝试在 @font-face 规则中查找该家族名称，之后继续在可用系统字体中查找。名称匹配不区分大小写。在字体包含多种本地化字体家族名称的系统中，用户代理必须在匹配这些名称时独立于底层系统的语言或所使用的平台 API。如果一个由 @font-face 规则定义的字体家族仅包含无效的字体数据，则它应当被认为是一个存在的但包含空的字符映射的字体；在此情况下，拥有相同名称的平台字体不能匹配。
4. 如果一个字体家族成功匹配，用户代理组合包含字符的字形的家族中的字体外观集。之后逐步的根据下面给出的顺序使用其他字体属性匹配一个外观：
   1. 首先尝试 font-stretch。如果匹配集中包含宽度指匹配 font-stretch 值的外观，则从匹配集中删除拥有其他宽度值的字形。如果没有精确匹配该宽度值的外观，则使用相近的宽度。如果 font-stretch 为 normal 或收缩比例值之一，则首先检查较窄的宽度值，之后检查较宽的宽度值。如果 font-stretch 的值是扩大比例值之一，则首先检查较宽的宽度值，之后检查较窄的宽度值。一旦通过此过程确定了最近匹配的宽度，则从匹配集中删除其他宽度的外观。
   2. 之后尝试 font-style。如果 font-style 的值是 italic，则首先检查斜体外观，之后检查倾斜，然后检查正常外观。如果值为 oblique，则首先检查倾斜外观，之后检查斜体外观，然后检查正常外观。如果值为 normal，则首先检查正常外观，之后检查倾斜外观，然后检查斜体外观。从匹配集中删除拥有其他样式值的外观。我们允许用户代理在平台字体家族中区分斜体和倾斜外观，但这不是必须的，用户代理可以将斜体或倾斜外观都视为斜体外观。但是，在由 @font-face 规则定义的字体家族中，斜体和倾斜外观必须使用 font-style 描述符进行区分。
   3. 之后匹配 font-weight，它总能将匹配集缩小为一个字体外观。如果使用了更大/更小相对重量，则基于继承的重量值计算有效重量，相关信息在 font-weight 属性的定义中描述。给定需要的重量和经过之前各步之后匹配集中外观的宽度，如果需要的重量可用，则匹配该外观。否则，使用下面的规则选择一个重量：
      1. 如果需要的重量小于400，则首先降序检查小于所需重量的各重量，之后升序检查大于所需重量的各重量，直到找到匹配的重量。
      2. 如果需要的重量大于500，则首先升序检查大于所需重量的各重量，之后降序检查小于所需重量的各重量，直到找到匹配的重量。
      3. 如果所需的重量是400，则首先检查500，之后执行所需重量小于400的规则。
      4. 如果所需的重量是500，则首先检查400，之后执行所需重量大于500的规则。
   4. font-size 必须在用户代理决定的容差边距中匹配。（典型的，可缩放字体被四舍五入到最近的整数像素，而点阵字体的容差可以到 20%。）进一步的计算（如其他属性中的“em”值）是基于使用的 font-size 值，而不是指定的值。
   5. 如果没有匹配的外观，或者匹配的外观不包含需要显示的字符的字形，则选择下一个家族名称，并重复前面两步。如果匹配的字体是使用 @font-face 规则定义的，则下载字体资源。如果匹配的字体是使用 @font-face 规则定义的且需要下载，则用户代理可以等待字体下载也可以先使用替代字体显示然后在字体下载之后再一次显示。
   6. 如果没有可考虑的字体家族，而且没有找到匹配的外观，则用户代理执行系统备用字体过程来查找用于显示的最佳匹配字符。这个过程的结果可能会因用户代理而不同。
   7. 如果个别字符不能使用任何字体显示，则用户代理应当使用某些方法表示该字体不能显示，可以显示一个表示缺少字形的符号（例如使用 Last Resort Font）或者使用默认字体中的缺失字符字形。

宽度

#write {
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    /* padding: 20px 30px 100px */
    padding: 36px 0 70px
}