fix(ruler,water-mark): change canvas font family (didi#408)

supergaojian · xxyan0205 · commit f9cc74f5acfb · 2019-04-19T11:45:48.000+08:00
* fix(ruler,water-mark): change canvas font family

* example(ruler): change ruler demo doc

* feat(ruler,water-mark): change canvas font-family
diff --git a/components/ruler/demo/cases/demo0.vue b/components/ruler/demo/cases/demo0.vue
@@ -15,8 +15,13 @@
 <script>import {Ruler} from 'mand-mobile'
 
 export default {
-  name: 'ruler-demo',
+  name: 'ruler-demo-0',
+  /* DELETE */
   title: '基本',
+  titleEnUS: 'Basic',
+  message: '请在移动设备中扫码预览',
+  messageEnUS: 'Please scan QR code and preview on mobile device',
+  /* DELETE */
   components: {
     [Ruler.name]: Ruler,
   },
diff --git a/components/ruler/demo/cases/demo1.vue b/components/ruler/demo/cases/demo1.vue
@@ -17,8 +17,13 @@
 <script>import {Ruler} from 'mand-mobile'
 
 export default {
-  name: 'ruler-demo',
+  name: 'ruler-demo-1',
+  /* DELETE */
   title: '最大1800，最小1200',
+  titleEnUS: 'Max 1800, Min 1200',
+  message: '请在移动设备中扫码预览',
+  messageEnUS: 'Please scan QR code and preview on mobile device',
+  /* DELETE */
   components: {
     [Ruler.name]: Ruler,
   },
diff --git a/components/ruler/demo/cases/demo2.vue b/components/ruler/demo/cases/demo2.vue
@@ -23,6 +23,8 @@ export default {
   titleEnUS: 'trigger <a href="javascript:window.triggerRuler2()">Change to 1500</a>',
   describe: '只在滚动停止时有效',
   describeEnUS: 'only valid when scroll is stopped',
+  message: '请在移动设备中扫码预览',
+  messageEnUS: 'Please scan QR code and preview on mobile device',
   /* DELETE */
   components: {
     [Ruler.name]: Ruler,
diff --git a/components/ruler/index.vue b/components/ruler/index.vue
@@ -215,7 +215,8 @@ export default {
       const _stepUnit = Math.round(step / unit)
 
       ctx.lineWidth = 2
-      ctx.font = `${_fontSize * ratio}px DINPro-Medium`
+      ctx.font = `${_fontSize *
+        ratio}px DIN Alternate, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif`
 
       for (let i = 0; i <= unitCount; i++) {
         const _x = x + i * blank
diff --git a/components/water-mark/index.vue b/components/water-mark/index.vue
@@ -143,7 +143,7 @@ export default {
       const xCount = Math.ceil(ctxWidth * ratio / (contentLength + realSpacing))
       const yCount = Math.ceil(ctxHeight * ratio / (_fontSize + realSpacing))
 
-      ctx.font = `${_fontSize}px DINPro-Medium`
+      ctx.font = `${_fontSize}px DIN Alternate, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif`
       ctx.fillStyle = color
 
       let ctxX = 0
