更纱黑体各字形比较
我的控制台用的是这个字体，觉得不错，但是一直没搞懂readme.md里几个字体是怎么分的，尝试做了一个页面展示一下里面的信息。
在介绍字体的部分中，关于简体中文、繁体中文什么的应该就不用介绍了，这篇文章主要想看一看Latin/Greek/Cyrillic的字体区别，所以弄了点代码弄个页面看看到底是什么情况，Latin/Greek/Cyrillic的字母来自 https://www.jetbrains.com/lp/mono/ 。代码见最后，先把结果放出来，顺序按照gothic、ui、mono、term和fixed：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{width:800px;margin:0 auto}.gothic-sc{font-family:"更纱黑体 SC"}.ui-sc{font-family:"更纱黑体 UI SC"}.mono-sc{font-family:"等距更纱黑体 SC"}.term-sc{font-family:"sarasa term sc"}.fixed-sc{font-family:"sarasa fixed sc"}
</style>
</head>
<body>
<div id="app">
<template v-for="item in items">
<div>
<h2>{{item.name}}</h2>
<template v-for="font in fonts">
<p :class="font.name" v-bind:title="font.cname">
{{item.content}}
</p>
</template>
</div>
</template>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
fonts: [{ name: 'gothic-sc', cname: '更纱黑体 SC' },
{ name: 'ui-sc', cname: '更纱黑体 UI SC' },
{ name: 'mono-sc', cname: '等距更纱黑体 SC' },
{ name: 'term-sc', cname: 'sarasa term sc' },
{ name: 'fixed-sc', cname: 'sarasa fixed sc' }],
items: [{
name: '连字 Ligatures', content: '-- --- == === != !== =!= =:= =/= <= >= && &&& &= ++ +++ \
*** ;; !! ?? ??? ?: ?. ?= <: :< :> >: <:< <> <<< >>> << \
>> || -| _|_ |- ||- |= ||= ## ### #### #{ #[ ]# #( #? #_ \
#_( #: #! #= ^= <$> <$ $> <+> <+ +> <*> <* *> </ </> /> \
<!-- <#-- --> -> ->> <<- <- <=< =<< <<= <== <=> \
<==> \
==> \
=> =>> >=> >>= >>- >- -< -<< >-> <-< <-| <=| \
|=> \
|-> <-> \
```<~~ <~ <~> ~~ ~~> ~> ~- -~ ~@ [||] |] [| |} {| [< >] |> \
<| ||> <|| |||> <||| <|> ... .. .= ..< .? :: ::: := ::= \
:? :?> // /// /* */ /= //= /== @_ __'},
{
name: '拉丁字母 Latin', content: 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z \
a b c d e f g h i j k l m n o p q r s t u v w x y z'},
{
name: '希腊字母 Greek', content: 'Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω \
Ά Έ Ή Ί Ό Ύ Ώ Ϊ Ϋ Ϗ \
α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ί ϊ ΐ ύ ϋ ΰ ό ώ ά έ ή ϗ ϕ ϖ'},
{
name: '西里尔字母 Cyrillic', content: 'А Б В Г Ѓ Ґ Д Е Ё Ж З И Й К Ќ Л М Н О П Р С Т У Ў Ф Х Ч Ц Ш Щ Џ Ь Ъ Ы Љ Њ Ѕ Є Э І Ї Ј \
Ћ Ю Я Ђ Ғ Қ Ң Ү Ұ Ҷ Һ Ә Ө а б в г ѓ ґ д е ё ж з и й к ќ л м н о п р с т у ў ф х ч ц ш щ џ ь ъ ы љ њ ѕ є э і ї ј ћ ю я \
ђ ғ қ ң ү ұ ҷ һ ә ө'},
{ name: '引号 Quotes', content: '“”' },
{ name: '破折号 Em dashes', content: '--' }]
}
})
</script>
</html>
