下载文档

uexHYFont
更新时间:2015-08-04

1、简介

汉仪字体库插件

1.1、 业务限制资源规格限制说明

uexHYFont插件可以帮助移动应用开发者方便地设置字体效果。自带6款字体,瞬间让你的APP具有高品质、时尚、文艺、古典、卡哇伊等风格,通过非常贴切的视觉体验更快的吸引用户使用APP。基于FullType超小字体技术,插件容量极小,可以有效控制集成字体后的安装包大小。
版权说明:
本插件(uexHYFont)仅限个人非商业用途。

1.2、 UI展示

1.3、 相关下载

参考demo下载:点击查看
自定义插件下载:点击此处

1.4、术语表

Path Types

协议头 Android对应路径 (其中”/sdcard/“等 同于”/storage/emulated/0/“) iOS对应路径
res:// widget/wgtRes/ widget/wgtRes
wgts:// /storage/emulated/0/widgetone/apps/ xxx(widgetAppId)/ /Documents/apps/xxx(widgetAppId)/
wgts:// /storage/emulated/0/widgetone/widgets/ /Documents/widgets/
file:///sdcard/ /storage/emulated/0/

2、API概览

2.1、方法

applyFontStyle 应用字体库样式

applyFontStyle(familyName,styleName);
参数:
平台支持:
Android2.2+
iOS6.0+
版本支持:
3.0.0+
使用说明:
在appcan.ready函数内或者按钮等处调用applyFontStyle,并且在html5应用页面中引入font.js(font.js文件已经在demo中提供)。
Javascript脚本::

  1. function applyFontStyle(familyName,styleName) {
  2. uexHYFont.setFontPath = function (opId, dataType, data) {
  3. var fontPath = data;
  4. appcan.file.exists({
  5. filePath : fontPath,
  6. callback : function(err, data, dataType, optId) {
  7. if (err) { //判断文件出错了
  8. return;
  9. }
  10. if (data == 1) { //文件存在
  11. addCssByStyle("@font-face {font-family: " + familyName + ";src:url(" + fontPath + ") format('truetype');}" + styleName+" {font-family: " + familyName + " !important;;", familyName);
  12. }
  13. }
  14. });
  15. };
  16. uexHYFont.textareapareFont(familyName);
  17. function addCssByStyle(cssString, fontName) {
  18. var doc = document;
  19. var style = doc.createElement("style");
  20. style.setAttribute("type", "text/css");
  21. if (style.styleSheet) {// IE
  22. style.styleSheet.cssText = cssString;
  23. } else {// w3c
  24. var cssText = doc.createTextNode(cssString);
  25. style.appendChild(cssText);
  26. style.id = fontName;
  27. }
  28. var heads = doc.getElementsByTagName("head");
  29. if (heads.length)
  30. heads[0].appendChild(style);
  31. else
  32. doc.documentElement.appendChild(style);
  33. }
  34. }

示例:

  1. <!DOCTYPE html>
  2. <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
  8. <link rel="stylesheet" href="css/ui-box.css">
  9. <link rel="stylesheet" href="css/ui-base.css">
  10. <link rel="stylesheet" href="css/ui-color.css">
  11. <link rel="stylesheet" href="css/appcan.icon.css">
  12. <link rel="stylesheet" href="css/appcan.control.css">
  13. <!-- <link rel="stylesheet" href="css/font.css"> -->
  14. </head>
  15. <body class="um-vp bc-bg" ontouchstart>
  16. <div class="font ">
  17. 文本文本...
  18. </div>
  19. <div class="btn ub ub-ac bc-text-head ub-pc bc-btn" id="btn1">
  20. 汉仪旗黑GBK50
  21. </div>
  22. <br/>
  23. <div class="btn ub ub-ac bc-text-head ub-pc bc-btn" id="btn2">
  24. 羿创全唐诗简
  25. </div>
  26. <div class="btn ub ub-ac bc-text-head ub-pc bc-btn" id="btn3">
  27. 羿创书宋二
  28. </div>
  29. <div class="btn ub ub-ac bc-text-head ub-pc bc-btn" id="btn4">
  30. 汉仪细中圆简
  31. </div>
  32. <div class="btn ub ub-ac bc-text-head ub-pc bc-btn" id="btn5">
  33. 汉仪雪君体简
  34. </div>
  35. <div class="btn ub ub-ac bc-text-head ub-pc bc-btn" id="btn6">
  36. 羿创丫丫体
  37. </div>
  38. <script src="js/appcan.js"></script>
  39. <script src="js/appcan.control.js"></script>
  40. <script src="js/font.js"></script>
  41. </body>
  42. <script>
  43. var fontName = "羿创雪君体";
  44. appcan.ready(function() {
  45. appcan.initBounce();
  46. })
  47. appcan.button(".btn", "btn-act", function() {
  48. if (this.id == "btn1")
  49. fontName = "汉仪旗黑GBK50";
  50. if (this.id == "btn2")
  51. fontName = "羿创全唐诗简";
  52. if (this.id == "btn3")
  53. fontName = "羿创书宋二";
  54. if (this.id == "btn4")
  55. fontName = "汉仪细中圆简";
  56. if (this.id == "btn5")
  57. fontName = "汉仪雪君体简";
  58. if (this.id == "btn6")
  59. fontName = "羿创丫丫体";
  60. applyFontStyle(fontName, 'body');
  61. })
  62. </script>
  63. </html>