20.10.28

CSS font相关

来源：antd 表格中 dropDown 的字体设置：
font-variant: tabular-nums;
min-width: 120px;

font-feature-settings

https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-feature-settings
OpenType字体中的高级印刷功能

该属性相当于是 font-variant 的补充，不是替代。

font-variant

https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant
字体印刷形变的相关配置。（字形控制）

font-variant-caps controls the use of alternate glyphs for capital letters. （大写字母形态，也可将所有字全转变为某种大写）

font-variant-numeric controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.（数字，分数，序号等字形）

font-variant-alternates firefox 专有属性

font-variant-ligatures ie 不支持 controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.（连字字形，字体连接形态）

font-variant-east-asian ie不支持 controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.（东亚字体字形，中文：繁简，日文：片平 的转化）

一个优秀的动画的启发

https://twitter.com/JoshWComeau/status/1321131521273712645
动画地址：
https://nextjs.org/analytics

- CSS + DOM is great for “typical” web content, it’s familiar and performant
- SVGs are good for progress bars (stroke-dashoffset trick) and gooey effects (blur filters)
- Canvas is good for moving lots of things at once, no DOM bottleneck

CSS + DOM 实现常规内容
SVG 实现偏移及粘连效果（https://www.jianshu.com/p/074c8124e138），值得学习。
Canvas 则适合大量内容同时移动的场景

TS 函数重载

使用 function ，多个定义后，用一个 argument 为 any 的函数 implement（实现）：

let suits = ["hearts", "spades", "clubs", "diamonds"];
function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x: any): any {
  // Check to see if we're working with an object/array
  // if so, they gave us the deck and we'll pick the card
  if (typeof x == "object") {
    let pickedCard = Math.floor(Math.random() * x.length);
    return pickedCard;
  }
  // Otherwise just let them pick the card
  else if (typeof x == "number") {
    let pickedSuit = Math.floor(x / 13);
    return { suit: suits[pickedSuit], card: x % 13 };
  }
}
let myDeck = [
  { suit: "diamonds", card: 2 },
  { suit: "spades", card: 10 },
  { suit: "hearts", card: 4 },
];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);