fix: use fixed size for time numbers (#263)

zhihu · Mar 28, 2022 · 301c660 · 301c660
1 parent da2cb55
commit 301c660
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/example/index.html b/example/index.html
@@ -5,6 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Demo</title>
+    <style>
+      body {
+        font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>

diff --git a/packages/griffith/src/components/Controller.styles.ts b/packages/griffith/src/components/Controller.styles.ts
@@ -80,6 +80,7 @@ export default StyleSheet.create({
     fontSize: '0.875em',
     color: 'rgba(255, 255, 255, 0.9)',
     boxSizing: 'content-box',
+    fontVariantNumeric: 'tabular-nums',
   },
 
   labelButton: {

diff --git a/...ages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap b/...ages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CombinedTimeItem get CombinedTimeItem component 1`] = `
 <div>
-  <div class="time_i860ms-o_O-fullScreenedTime_1xxtrer">00:06 / 03:02</div>
+  <div class="time_1n8zam0-o_O-fullScreenedTime_1xxtrer">00:06 / 03:02</div>
 </div>
 
 `;