diff --git a/docs/api/load-font-face.md b/docs/api/load-font-face.md index 67ffda26bd4c7a85804cdb10d1ad1c4e01ec9802..3a5d56fcea2594136488b34ad992659f6bff2208 100644 --- a/docs/api/load-font-face.md +++ b/docs/api/load-font-face.md @@ -5,7 +5,23 @@ #### 注意事项 -app-ios平台加载字体一定是全局生效,不支持通过global属性设置为非全局生效 +- app-ios平台加载字体一定是全局生效,不支持通过global属性设置为非全局生效 +- family属性指定自定义字体路径时,必须使用`url()`包裹。可能某些平台不包裹也可以生效,但标准规范是包裹,按标准写法才能全端生效。如下: +```uts +uni.loadFontFace({ + global: true, + family: 'UniFontFamily', + source: "url('/static/font/uni.ttf')", //需使用url方法包裹。本地字体请放在/static目录下,否则打包时不会把字体文件打进去。也支持网络字体 + success() { + console.log('global loadFontFace uni.ttf success') + }, + fail(error) { + console.warn('global loadFontFace uni.ttf fail', error.errMsg) + }, +}) +``` + +不同平台支持的字体格式不同,另见[css字体](../css/font-family.md) diff --git a/docs/css/README.md b/docs/css/README.md index c60e649a2666ea18ea073803f95400e0a299a0a9..2be16ac465af553b8e2c466c53f5fb8510cb918f 100644 --- a/docs/css/README.md +++ b/docs/css/README.md @@ -6,7 +6,7 @@ uni-app x 在 app平台实现了 web css 的子集。 子集并不影响开发者开发出所需的界面,仅是写法上没有那么丰富。 -当 uni-app x 编译到 web、小程序等平台时,可以支持 web 的全部 css。同时,编译器会进行 css 重置,保证 ucss 这个子集在各端效果的一致性。 +当 uni-app x 编译到 web、小程序等平台时,可以支持 web 的全部 css。同时,**编译器会进行 css 重置**,保证 ucss 这个子集在各端效果的一致性。这也意味着使用uni-app x的web端,和直接在浏览器里写html在默认值处理上有一定的差异。 App端与web常见的区别是: 1. 仅支持**flex 布局** @@ -23,7 +23,11 @@ App端与web常见的区别是: ### flex方向 @flex-direction -在web中,flex 默认是`横向`的,但app默认是`纵向`的。为了多端兼容,建议开发者**显式声明flex方向**,不使用默认值。 +在W3C规范中,flex 默认是`横向`的,但uni-app x里全平台的flex方向默认值都是`纵向`的。 + +因为W3C规范中,默认布局是block,当使用flex时更高频率是用它的横排能力。而在flex是第一布局模型的手机端,大量布局都是竖排的,此时要求开发者大量编写`style="flex-direction:column"`很不友好。 + +所以在uni-app x中默认是竖排(之前nvue也默认是竖排)。同时在[manifest.json](../collocation/manifest.md)中提供了配置项,可以修改flex方向为横排。 ```html @@ -32,6 +36,9 @@ App端与web常见的区别是: + + + ``` 一般在`app.uvue`的style里编写全局样式,在页面里使用class引用更为方便。 @@ -81,7 +88,7 @@ App端与web常见的区别是: 但在uvue中,废弃了这个策略。因为开发者的页面情况较复杂,而且vue3支持多个一级组件,之前的策略可能会多给页面套一层不必要的scroll-view。\ 在追求高性能时,多一层scroll-view是不能忍受的。 -`uvue的策略`:在新建页面时,提供一个选项,让开发者选择是否需要页面级滚动。如需要则自动在页面代码里template的根节点加一个全屏的scroll-view。 +`uvue的策略`:在新建页面时,提供一个选项,让开发者选择是否需要页面级滚动。如需要则自动在页面代码里template的根节点加一个全屏的scroll-view。如下 > 如果开发者不需要,随时可以自己修改代码。 @@ -107,11 +114,11 @@ App端与web常见的区别是: 上述代码中给scroll-view的style设为`flex:1`,意思是铺满剩余空间。设在顶层节点上,意味着铺满屏幕。 -当然,如果页面的pages.json里配置使用了原生导航栏,那么页面区整体是在导航栏下面。 +当然,如果页面的pages.json里配置使用了原生导航栏,那么页面区整体是在原生导航栏下面。 #### 自定义导航栏 -如果开发者想要自定义导航栏,首先在pages.json里对应页面的style里设置`"navigationStyle": "custom"`,关闭原生导航栏。 +如果开发者想要自定义导航栏,首先在pages.json里对应页面的style里设置`"navigationStyle": "custom"`,关闭原生导航栏。\ 然后编写自定义的导航栏组件[\](https://ext.dcloud.net.cn/plugin?id=14618),那么推荐的页面代码结构为: ```html @@ -128,7 +135,7 @@ App端与web常见的区别是: ``` -> 注:这里的“原生导航栏”是一个历史沿袭叫法,指配置在pages.json里的导航栏,不属于页面代码区。事实上在uni-app x里所有界面都是原生的。 +> 注:这里的“原生导航栏”是一个历史沿袭叫法,指配置在pages.json里的导航栏,不属于页面代码区。事实上在uni-app x的app平台里所有界面都是原生的。 #### 页面滚动相关的生命周期、api @@ -202,7 +209,7 @@ uvue中文字都是要使用text组件的。 ``` -app-uvue的css的样式不继承规则,虽然与web有差异,其实只是更严谨。 +app-uvue的css的“样式不继承”规则,虽然与web有差异,其实只是更严谨。 一般情况下,开发者遵循仅在text组件下写文字有关的样式,就可以编译到全端而保持界面正常。 diff --git a/docs/css/font-family.md b/docs/css/font-family.md index dcb8eec4a250df7da41262a24f6f682b455486eb..3ae97175b0018ef99db64d0840f35ec23db74f84 100644 --- a/docs/css/font-family.md +++ b/docs/css/font-family.md @@ -13,15 +13,27 @@ -### 字体格式 -- app-android 支持ttf和otf字体。不支持woff和woff2和可变字体 -- web支持的字体取决于浏览器,详见mdn或caniuse +### 字体设置 + +对于系统中已经存在的字体,font-family里直接写字体名称即可。\ +但对于系统中不存在的字体,需要通过src属性的url方法来指定字体路径。如下: +```css +@font-face { + font-family: UniFontFamily; + src: url('/static/uni.ttf'); + } +``` + +**关于自定义字体的格式** +- app-android: 支持ttf和otf字体。不支持woff和woff2和可变字体 +- web: 支持的字体取决于浏览器,详见mdn或caniuse + +自定义字体的加载,除了在css的src中设置,也可以使用API [uni.loadFontface](../api/load-font-face.md) + ### App平台差异 -- font-family 样式不支持继承 +- font-family 样式不支持继承,每层组件都需要设样式 -### 字体图标 -- 可在css里直接加载,[参考](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/CSS/text/font-family.uvue) -- 也可以使用API [uni.loadFontface](../api/load-font-face.md) + - \ No newline at end of file +[示例代码](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/CSS/text/font-family.uvue) \ No newline at end of file