You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2018/08/14 02:50:36 UTC
incubator-weex-site git commit: + Add custom font.
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 <yo...@alibaba-inc.com>
Authored: Mon Aug 13 21:20:42 2018 +0800
Committer: york.sy <yo...@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