Repository: incubator-weex-site Updated Branches: refs/heads/master 4e1c6a0e5 -> b124607fc
+ Add custom font. Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/b124607f Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/b124607f Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/b124607f Branch: refs/heads/master Commit: b124607fca663bb29e2233cf152d784acb4f610f Parents: 4e1c6a0 Author: york.sy <york...@alibaba-inc.com> Authored: Mon Aug 13 21:20:42 2018 +0800 Committer: york.sy <york...@alibaba-inc.com> Committed: Mon Aug 13 21:20:42 2018 +0800 ---------------------------------------------------------------------- source/cn/references/components/text.md | 4 +-- source/cn/references/modules/custom_font.md | 41 ++++++++++++++++++++++++ source/cn/references/modules/dom.md | 22 +------------ source/references/components/text.md | 4 +-- source/references/modules/custom_font.md | 41 ++++++++++++++++++++++++ source/references/modules/dom.md | 21 +----------- 6 files changed, 87 insertions(+), 46 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/b124607f/source/cn/references/components/text.md ---------------------------------------------------------------------- diff --git a/source/cn/references/components/text.md b/source/cn/references/components/text.md index 8b4932f..491a251 100644 --- a/source/cn/references/components/text.md +++ b/source/cn/references/components/text.md @@ -34,10 +34,8 @@ version: 2.1 ## èªå®ä¹åä½ `æ¯æçæ¬:v0.12.0` -æ¯ættfåwoffåä½æ ¼å¼çèªå®ä¹åä½, å¯ä»¥éè¿è°ç¨ `dom` module éé¢ç [addRule](../modules/dom.html#addRule)æ¹æ³, æ建èªå®ä¹ç`font-family`使ç¨, addRule å»ºè®®å¨ `beforeCreate` æè æ´æ©æ¶è°ç¨ +æ¯ættfåwoffåä½æ ¼å¼çèªå®ä¹åä½, å¯ä»¥éè¿è°ç¨ `dom` module éé¢ç [addRule](../modules/custom_font.html)æ¹æ³, æ建èªå®ä¹ç`font-family`使ç¨, addRule å»ºè®®å¨ `beforeCreate` æè æ´æ©æ¶è°ç¨ ## ç¤ºä¾ * [`<text>`çåºæ¬ç¨æ³](http://dotwe.org/vue/9ac60ccb4d1aacbdbd608dd7107ad105) -* [èªå®ä¹åä½ç使ç¨æ¹æ³](http://dotwe.org/vue/1cac4b398df5bb65ed21e83deceead1c) - http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/b124607f/source/cn/references/modules/custom_font.md ---------------------------------------------------------------------- diff --git a/source/cn/references/modules/custom_font.md b/source/cn/references/modules/custom_font.md new file mode 100644 index 0000000..6109d77 --- /dev/null +++ b/source/cn/references/modules/custom_font.md @@ -0,0 +1,41 @@ +--- +title: dom +type: references +group: Build-in Modules +order: 9.03 +version: 2.1 +--- + +# Custom Font <span class="api-version">v0.12.0+</span> +## ç®ä» +Weex æä¾ **DOM.addRule** 以å è½½èªå®ä¹åä½ãå¼åè å¯ä»¥éè¿æå® **font-family**å è½½ *iconfont* å *custom font*ã + +## API +å¼åè å¯ä»¥ä½¿ç¨ä¸é¢ç代ç å è½½èªå®ä¹åä½ï¼ + + const domModule = weex.requireModule('dom') + domModule.addRule('fontFace', { + 'fontFamily': "iconfont2", + 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" + }); + +åæ°å«ä¹å¦ä¸: + +* **fontFace** åè®®å称ï¼ä¸å¯ä¿®æ¹ã +* **fontFamily** font-familyçå称ã +* **src** åä½å°åï¼url('') æ¯ä¿çå段ï¼å ¶åæ°å¦ä¸: + * **http**. ä»HTTP请æ±å è½½, e.g. `url('http://at.alicdn.com/t/font_1469606063_76593.ttf')` + * **https**. ä»HTTPS请æ±å è½½, e.g. `url('https://at.alicdn.com/t/font_1469606063_76593.ttf')` + * **local**, *Android ONLY*. ä»assetsç®å½è¯»å, e.g. `url('local://foo.ttf')`, **foo.ttf** æ¯æ件åå¨ä½ çassetsç®å½ä¸. + * **file**. ä»æ¬å°æ件读å, e.g. `url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')` + * **data**. ä»base64读å, e.g. `url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')`, ä¸è¿°dataå段ä¸å ¨ã + +## Note +> **Note:** `addRule` æ¹æ³éç `fontFamily` å¯ä»¥éæåãè¿ä¸ªååä¸æ¯åä½çæ£çååãåä½çæ£çååï¼font-familyï¼ï¼ä¹å°±æ¯æ³¨åå°ç³»ç»ä¸çååæ¯ä¿åå¨åä½äºè¿å¶æ件ä¸çãä½ éè¦ç¡®ä¿ä½ 使ç¨çåä½ççæ£ååï¼font-familyï¼è¶³å¤ç¹æ®ï¼å¦åå¨åç³»ç»æ³¨åæ¶å¯è½åçå²çªï¼å¯¼è´æ³¨å失败ï¼ä½ çå符被æ¾ç¤ºä¸ºâ?âã + +> **Note:** å¦æä½ ä½¿ç¨ http://www.iconfont.cn/ æ¥æå»ºä½ ç iconfontãç¡®ä¿å¨é¡¹ç®è®¾ç½®ä¸ï¼è®¾ç½®ä¸ä¸ªç¹æ®ç font-family ååãé»è®¤æ¯ âiconfontâï¼ä½æ大å¯è½åçå²çªã + +> **Note:** è°ç¨`addRule` å¨ `beforeCreate` ä¸æ¯è¢«æ¨èçã + +## Example +[示ä¾](http://dotwe.org/vue/7e328ee2ac9b7205c9ee37f4e509263d)ã \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/b124607f/source/cn/references/modules/dom.md ---------------------------------------------------------------------- diff --git a/source/cn/references/modules/dom.md b/source/cn/references/modules/dom.md index bb910a5..588a5ec 100644 --- a/source/cn/references/modules/dom.md +++ b/source/cn/references/modules/dom.md @@ -64,24 +64,4 @@ version: 2.1 `æ¯æçæ¬: >=0.12.0` -addRuleæ¯å¯ä»¥ä¸ºdom æ·»å ä¸æ¡è§åï¼ç®åæ¯æèªå®ä¹åä½fontFaceè§åï¼æ建èªå®ä¹çfont-familyï¼å¯ä»¥å¨[text](../components/text.html#iconfont)ä½¿ç¨ - -#### fontFace - -```javascript -const domModule = weex.requireModule('dom') -domModule.addRule('fontFace', { - 'fontFamily': "iconfont2", - 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" -}) -``` - -**注æäºé¡¹** - -`addRule` æ¹æ³éç `fontFamily` å¯ä»¥éæåãè¿ä¸ªååä¸æ¯åä½çæ£çååãåä½çæ£çååï¼font-familyï¼ï¼ä¹å°±æ¯æ³¨åå°ç³»ç»ä¸çååæ¯ä¿åå¨åä½äºè¿å¶æ件ä¸çãä½ éè¦ç¡®ä¿ä½ 使ç¨çåä½ççæ£ååï¼font-familyï¼è¶³å¤ç¹æ®ï¼å¦åå¨åç³»ç»æ³¨åæ¶å¯è½åçå²çªï¼å¯¼è´æ³¨å失败ï¼ä½ çå符被æ¾ç¤ºä¸ºâ?âã - -å¦æä½ ä½¿ç¨ http://www.iconfont.cn/ æ¥æå»ºä½ ç iconfontãç¡®ä¿å¨é¡¹ç®è®¾ç½®ä¸ï¼è®¾ç½®ä¸ä¸ªç¹æ®ç font-family ååãé»è®¤æ¯ âiconfontâï¼ä½æ大å¯è½åçå²çªã - -#### ç¤ºä¾ - -[add rule fontface](http://dotwe.org/vue/95b2c6716f37066d5f44c5c75c979394) +åè[èªå®ä¹åä½](./custom_font.html)ã \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/b124607f/source/references/components/text.md ---------------------------------------------------------------------- diff --git a/source/references/components/text.md b/source/references/components/text.md index 120d390..3d251f4 100644 --- a/source/references/components/text.md +++ b/source/references/components/text.md @@ -35,8 +35,8 @@ Support [common events](/wiki/common-events.html) ## Custom Typeface `support:v0.12.0` -support `ttf` and `woff` font format to custom your text, call [addRule](../modules/dom.html#addRule) in dom module to build your own `font-family`, we suggest that you call `addRule` in `beforeCreate`. +support `ttf` and `woff` font format to custom your text, call [addRule](../modules/custom_font.html) in dom module to build your own `font-family`, we suggest that you call `addRule` in `beforeCreate`. ## Examples * [Basic usage for `<text>`](http://dotwe.org/vue/9ac60ccb4d1aacbdbd608dd7107ad105). -* [Usage for custom typeface](http://dotwe.org/vue/1cac4b398df5bb65ed21e83deceead1c). + http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/b124607f/source/references/modules/custom_font.md ---------------------------------------------------------------------- diff --git a/source/references/modules/custom_font.md b/source/references/modules/custom_font.md new file mode 100644 index 0000000..adf4967 --- /dev/null +++ b/source/references/modules/custom_font.md @@ -0,0 +1,41 @@ +--- +title: dom +type: references +group: Build-in Modules +order: 9.03 +version: 2.1 +--- + +# Custom Font <span class="api-version">v0.12.0+</span> +## OverView +Weex provide the ability of loading custom through **DOM.addRule**. Developers can load *iconfont* and *custom font* by specifying the **font-family**. + +## API +Developers may use the following code snippet to load their font: + + const domModule = weex.requireModule('dom') + domModule.addRule('fontFace', { + 'fontFamily': "iconfont2", + 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" + }); + +The parameter of **Add Rule** is illustrated as following: + +* **fontFace** You should not change this as this is the name of the font rule +* **fontFamily** You should provide the name of your font-family there, the valid name should be a string. +* **src** The src of your custom font, and url('') is reserved for protocol reason, the supported parameters are listed below: + * **http**. Read from http, e.g. `url('http://at.alicdn.com/t/font_1469606063_76593.ttf')` + * **https**. Read from https, e.g. `url('https://at.alicdn.com/t/font_1469606063_76593.ttf')` + * **local**, *Android ONLY*. Read from assets directory e.g. `url('local://foo.ttf')`, the **foo.ttf** is in your android assets directory. + * **file**. Read from a local file, e.g. `url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')` + * **data**. Read from a base64 data source, e.g. `url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')`, the above data field is only a part of the actual data. + +## Note +> **Note:** You can name `fontFamily` in `addRule` as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a '?'. + +> **Note:** Specially, if you are using http://www.iconfont.cn/ to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings. + +> **Note:** Calling `addRule` in `beforeCreate` is recommended. + +## Example +Check the custom font [example](http://dotwe.org/vue/7e328ee2ac9b7205c9ee37f4e509263d). \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/b124607f/source/references/modules/dom.md ---------------------------------------------------------------------- diff --git a/source/references/modules/dom.md b/source/references/modules/dom.md index 48c8934..ab561ae 100644 --- a/source/references/modules/dom.md +++ b/source/references/modules/dom.md @@ -68,23 +68,4 @@ If you want to get the bounding rect of outside viewport of the weex container, `support: >=0.12.0` -You can add certain rules for dom throught this API. Now we only support `fontFace` for building a custom `font-family`. You can use the built `font-family` in your project for [text](../components/text.html#iconfont) component directly. - -#### fontFace - -```javascript -const domModule = weex.requireModule('dom') -domModule.addRule('fontFace', { - 'fontFamily': "iconfont2", - 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" -}); -``` -**Important Notes** - -You can name `fontFamily` in `addRule` as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a '?'. - -Specially, if you are using http://www.iconfont.cn/ to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings. - -#### Example - -[add rule fontface](http://dotwe.org/vue/95b2c6716f37066d5f44c5c75c979394) +Reference [custom Font](./custom_font.html) for more detail. \ No newline at end of file
