使用文字教具打字,会出现不同平台不同端显示大小不一致,有部分用户无法查看完整内容的情况,这是由于不同平台使用的字体不一致导致的。
解决办法:三端使用同一套字体。
web 直接插入以下 css。
iOS 2.11.3,Android 2.11.2 之前的版本,可以使用系统 API 在 webview 里嵌入以下 css 即可。
.netless-whiteboard textarea {
/* 设置一个英文字体,中文字体 */
font-family:"AmstelvarAlpha", "中文字体";
}
# 名字要和 textarea 那边的 css 对应上
@font-face {
/** 英文下载地址 */
font-family:'AmstelvarAlpha';
src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
}
@font-face {
/** 中文下载地址 */
font-family:'中文字体';
src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
}
大概需要这样在三端插入同一套css 字体,这样就不会出现宽高不一致的问题。
如果是自己加的,基本只要加上这个文件就可以了。
中文字体版权问题很多,我们推荐使用思源宋体。
Android 2.11.2,iOS 2.11.3 版本新增API
public class WhiteSdk {
/**
* @param fontFaces 需要增加的字体,当名字可以提供给 ppt 和文字教具使用。
* 注意:1. 该修改只在本地有效,不会对远端造成影响。
* 2. 以这种方式插入的 FontFace,只有当该字体被使用时,才会触发下载。
* 3. FontFace,可能会影响部分设备的渲染逻辑,部分设备,可能会在完成字体加载后,才渲染文字。
* 4. 该 API 插入的字体,为一个整体,重复调用该 API,会覆盖之前的字体内容。
* 5. 该 API 与 loadFontFaces 重复使用,无法预期行为,请尽量避免。
* @since 2.11.2
*/
public void setupFontFaces(FontFace[] fontFaces) {
bridge.callHandler("sdk.updateNativeFontFaceCSS", new Object[]{fontFaces});
}
/**
* @param fontFaces 需要增加的字体,可以提供给 ppt 和文字教具使用。
* @param loadPromise 如果有报错,会在此处错误回调。该回调会在每一个字体加载成功或者失败后,单独回调。FontFace 填写正确的话,有多少个字体,就会有多少个回调。
* 注意:1. 该修改只在本地有效,不会对远端造成影响。
* 2. FontFace,可能会影响部分设备的渲染逻辑,部分设备,可能会在完成字体加载后,才渲染文字。
* 3. 该 API 插入的字体,无法删除;每次都是增加新字体。
* 4. 该 API 与 setupFontFaces 重复使用,无法预期行为,请尽量避免。
* @since 2.11.2
*/
public void loadFontFaces(FontFace[] fontFaces, final Promise<JSONObject>loadPromise) {
bridge.callHandler("sdk.asyncInsertFontFaces", new Object[]{fontFaces}, new OnReturnValue<JSONObject>() {
@Override
public void onValue(JSONObject retValue) {
loadPromise.then(retValue);
}
});
}
/**
* @param names 定义文字教具,在本地使用的字体。
* 注意:该修改只在本地有效,不会对远端造成影响。
* @since 2.11.2
*/
public void updateTextFont(String[] names) {
bridge.callHandler("sdk.updateNativeTextareaFont", new Object[]{names});
}
....
}
loadFontFaces 回调中的 JSONObject ,字段结构为
{
success: boolean,
// fontFace 描述字段
fontFace: JSONObject,
// 当加载错误时,会在此处显示错误信息;如果没有发生错误,则该字段不存在。
error?: string,
}
@interface WhiteSDK : NSObject
/**
* @param fontFaces 需要增加的字体,当名字可以提供给 ppt 和文字教具使用。
* 注意:1. 该修改只在本地有效,不会对远端造成影响。
* 2. 以这种方式插入的 FontFace,只有当该字体被使用时,才会触发下载。
* 3. FontFace,可能会影响部分设备的渲染逻辑,部分设备,可能会在完成字体加载后,才渲染文字。
* 4. 该 API 插入的字体,为一个整体,重复调用该 API,会覆盖之前的字体内容。
* 5. 该 API 与 loadFontFaces 重复使用,无法预期行为,请尽量避免。
* @since 2.11.3
*/
- (void)setupFontFaces:(NSArray <WhiteFontFace *>*)fontFaces;
/**
* @param fontFaces 需要增加的字体,可以提供给 ppt 和文字教具使用。
* @param completionHandler 如果有报错,会在此处错误回调。该回调会在每一个字体加载成功或者失败后,单独回调。FontFace 填写正确的话,有多少个字体,就会有多少个回调。
* 注意:1. 该修改只在本地有效,不会对远端造成影响。
* 2. FontFace,可能会影响部分设备的渲染逻辑,部分设备,可能会在完成字体加载后,才渲染文字。
* 3. 该 API 插入的字体,无法删除;每次都是增加新字体。
* 4. 该 API 与 setupFontFaces 重复使用,无法预期行为,请尽量避免。
* @since 2.11.3
*/
- (void)loadFontFaces:(NSArray <WhiteFontFace *>*)fontFaces completionHandler:(void (^)(BOOL success, WhiteFontFace *fontFace, NSError * _Nullable error))completionHandler;
/**
* @param fonts 定义文字教具,在本地使用的字体。
* 注意:该修改只在本地有效,不会对远端造成影响。
* @since 2.11.3
*/
- (void)updateTextFont:(NSArray <NSString *>*)fonts;
在 iOS 与 Android 中,均存在 FontFace 对象,该对象会映射至 CSS 中的 FontFace。
初始化时候,name 字段即为font-family
,其他字段为由驼峰转换为破折号分隔符。
需要注意的是 src 字段,该字段并不是简单的填入网络地址即可。
根据 CSS 规则,当使用网络地址时,需要使用 url("https://example.com/font.ttf")
这种形式。其他更多形式,其他更多填充形式,可以根据 font-face 规则填入。
标准的 fontFace,必须要存在font-family
,以及src
。SDK 不会检测这些字段的有效性,会直接将填充字段写入。
局限:font-family 只接收单个字体名字。如果字体名称带空格,会自动在转换时,写入"",所以该字段不需要自己多填充
""
@font-face {
font-family: "Times New Roman";
src: url("https://white-pan.oss-cn-shanghai.aliyuncs.com/Pacifico-Regular.ttf");
font-style: italic;
}
由于不同平台默认安装的字体不一致。推荐使用该 API 固定所有端字体,然后使用 loadFontFaces 或者 setupFontFaces 在 Android iOS 端插入该字体的下载路径。
这样就可以保证 native 用户,使用了统一的字体。
填写的 fontFace 中的 src 属性,需要符合 web CSS 中 Font-Face 的规范。