You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/06/02 06:03:59 UTC
[19/46] incubator-weex git commit: + [doc] add doc for iconfont
+ [doc] add doc for iconfont
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/1360b253
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/1360b253
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/1360b253
Branch: refs/heads/master
Commit: 1360b253409f6165cba9918f9de91a383a65707a
Parents: 13fcb64
Author: acton393 <zh...@gmail.com>
Authored: Tue May 16 17:33:16 2017 +0800
Committer: acton393 <zh...@gmail.com>
Committed: Tue May 16 17:33:16 2017 +0800
----------------------------------------------------------------------
doc/source/cn/references/components/text.md | 31 +++++++++++++++++++++
doc/source/cn/references/modules/dom.md | 19 +++++++++++++
doc/source/references/components/text.md | 35 +++++++++++++++++++++++-
doc/source/references/modules/dom.md | 19 +++++++++++++
4 files changed, 103 insertions(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/1360b253/doc/source/cn/references/components/text.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/components/text.md b/doc/source/cn/references/components/text.md
index ac43eea..2c13562 100644
--- a/doc/source/cn/references/components/text.md
+++ b/doc/source/cn/references/components/text.md
@@ -99,3 +99,34 @@ version: 2.1
```
[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2)
+
+## iconfont
+<sup class="wx-v">0.12.0</sup>
+1. 支持ttf和woff字体格式的自定义字体, 可以通过调用`dom` module 里面的 [addRule](../modules/dom.html#addRule)方法, 构建自定义的`font-family`使用
+
+```
+<template>
+ <div style='flex-direction:row;margin-top:50px'>
+ <text style='font-family:iconfont4;font-size:50;color:green'></text>
+ <text style='font-family:iconfont4;font-size:50;'></text>
+ <text style='font-family:iconfont4;font-size:60;color:blue'></text>
+ <text style='font-family:iconfont4;font-size:60;color:green'></text>
+ </div>
+</template>
+<script>
+ module.exports = {
+ created: function() {
+
+ var domModule = weex.requireModule('dom');
+ //目前支持ttf、woff文件，不支持svg、eot类型,moreItem at http://www.iconfont.cn/
+
+ domModule.addRule('fontFace', {
+ 'fontFamily': "iconfont2",
+ 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
+ });
+ }
+}
+</script>
+```
+
+[try it](http://dotwe.org/vue/d96b6f89aadd1d628111c16a30e80482)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/1360b253/doc/source/cn/references/modules/dom.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/modules/dom.md b/doc/source/cn/references/modules/dom.md
index c9586f0..ba05751 100644
--- a/doc/source/cn/references/modules/dom.md
+++ b/doc/source/cn/references/modules/dom.md
@@ -256,6 +256,25 @@ version: 2.1
[try it](http://dotwe.org/vue/d069a9bf0f0781b914f12a9a7b9a1447)
+
+###addRule
+<sup class="wx-v">0.12.0</sup>
+
+addRule是可以为dom 添加一条规则，目前支持自定义字体fontFace规则，构建自定义的font-family，可以在[text](../components/text.html#iconfont)
+
+####fontFace
+
+```
+var domModule = weex.requireModule('dom');
+domModule.addRule('fontFace', {
+ 'fontFamily': "iconfont2",
+ 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
+});
+
+```
+
+[try it](http://dotwe.org/vue/d96b6f89aadd1d628111c16a30e80482)
+
## 其他
dom 还有一些底层接口用于创建 Weex 实例时调用，比如 `createBody`、`updateAttrs` 等，但并未开放供外部使用。
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/1360b253/doc/source/references/components/text.md
----------------------------------------------------------------------
diff --git a/doc/source/references/components/text.md b/doc/source/references/components/text.md
index cfed19b..d6fa753 100644
--- a/doc/source/references/components/text.md
+++ b/doc/source/references/components/text.md
@@ -95,4 +95,37 @@ check out [common events](../common-event.html)
</style>
```
-[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2)
\ No newline at end of file
+[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2)
+
+##iconfont
+<sup class="wx-v">0.12.0</sup>
+
+1. 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`
+
+
+```
+<template>
+ <div style='flex-direction:row;margin-top:50px'>
+ <text style='font-family:iconfont4;font-size:50;color:green'></text>
+ <text style='font-family:iconfont4;font-size:50;'></text>
+ <text style='font-family:iconfont4;font-size:60;color:blue'></text>
+ <text style='font-family:iconfont4;font-size:60;color:green'></text>
+ </div>
+</template>
+<script>
+ module.exports = {
+ created: function() {
+
+ var domModule = weex.requireModule('dom');
+ //目前支持ttf、woff文件，不支持svg、eot类型,moreItem at http://www.iconfont.cn/
+
+ domModule.addRule('fontFace', {
+ 'fontFamily': "iconfont2",
+ 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
+ });
+ }
+}
+</script>
+```
+
+[try it](http://dotwe.org/vue/d96b6f89aadd1d628111c16a30e80482)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/1360b253/doc/source/references/modules/dom.md
----------------------------------------------------------------------
diff --git a/doc/source/references/modules/dom.md b/doc/source/references/modules/dom.md
index 3fcee70..23dd7cd 100644
--- a/doc/source/references/modules/dom.md
+++ b/doc/source/references/modules/dom.md
@@ -255,3 +255,22 @@ Example Useage:
[try it](http://dotwe.org/vue/87d4ed571de129ab28052b06a5d65fc8)
+
+###addRule
+<sup class="wx-v">0.12.0</sup>
+
+you can add your rule for dom by this, now we support `fontFace` only for building your custom `font-family`, use it on [text](../components/text.html#iconfont) directly.
+
+####fontFace
+
+```
+var domModule = weex.requireModule('dom');
+domModule.addRule('fontFace', {
+ 'fontFamily': "iconfont2",
+ 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
+});
+
+```
+[try it](http://dotwe.org/vue/d96b6f89aadd1d628111c16a30e80482)
+
+