# At-rules

名称	兼容性	描述
@charset		@charset CSS @规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 @charset @规则被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 <style> 元素内的样式属性内使用。
@color-profile		@color-profile CSS at-rule 定义并命名一个颜色配置文件，稍后可以在 color() 函数中使用该配置文件来指定颜色。
@container		@container CSS at-rule 是将样式应用于包含上下文的条件组规则。样式声明按条件筛选，如果条件为 true，则应用于容器。当容器更改大小时，将评估条件。你还可以给这个收纳盒贴上一个名字，这样它就会专门整理那些名字相同的容器。当它整理容器的时候，会仔细检查每个容器的所有细节，确保所有条件都符合才会应用样式。
@counter-style		@counter-style 是一个 CSS at-rule ，它让开发者可以自定义 counter 的样式。一个 @counter-style 规则定义了如何把一个计数器的值转化为字符串表示。
@document		@document CSS at 规则根据文档的 URL 限制其中包含的样式规则。它主要用于用户定义的样式表，但也可用于作者定义的样式表。
@font-face		@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载。如果提供了 local() 函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用 url() 函数下载的资源。通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络 - 安全"字体所限制 (字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。在同时使用 url() 和 local() 功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。@font-face 规则不仅仅使用在 CSS 的顶层，还可以用在任何 CSS 条件组规则中。
@font-feature-values		@font-feature-values CSS at-rule 允许作者在font-variant-alternates 中使用通用名称，用于在 OpenType 中以不同方式激活功能。它允许在使用几种字体时简化 CSS。
@font-palette-values		@font-palette-values CSS at-rule 允许您自定义字体制作者创建的字体调色板的默认值。
@import		@import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外; 因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。
@keyframes		关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。
@layer		CSS @规则中的@layer声明了一个级联层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。
@media		@media CSS at 规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。
@namespace		@namespace 是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。@namespace规则通常在处理包含多个 namespaces 的文档时才有用，比如 HTML5 里内联的 SVG、MathML 或者混合多个词汇表的 XML。
@page		@page 规则用于在打印文档时修改某些 CSS 属性。
@property		@property CSS at-rule是CSS Houdini API 的一部分，它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
@supports		@supports CSS at-rule 你可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。
@-moz-document		Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document.
@-moz-keyframes		Defines set of animation key frames.
@-ms-viewport		Specifies the size, zoom factor, and orientation of the viewport.
@-o-keyframes		Defines set of animation key frames.
@-o-viewport		Specifies the size, zoom factor, and orientation of the viewport.
@-webkit-keyframes		Defines set of animation key frames.

不支持的css功能，并不影响业务开发。因为css本质是一种编写元素的样式属性的一种描述性写法。元素的所有样式设置，都可以脱离css这种写法，由API完成。

@keyframes关键帧动画，在App平台，可以使用API方式实现，暂不支持通过css方式实现。详见UniElement的animate方法
@media媒体查询，宽屏适配可使用<match-media>组件，详见。判断暗黑模式可使用API实现，详见

# 字体

@font-face 这个at-rule用于自定义字体。

以下示例为加载一个字体文件，加载成功后，在text组件上设置相应的字体名称就可以按该字体渲染文字内容：

<style>
@font-face {
    font-family: AlimamaDaoLiTiOTF;
    src: url('/static/font/AlimamaDaoLiTi.ttf');
}
</style>

示例源码如下，请查看 pre > code 标签中的内容

<style>
@font-face {
    font-family: AlimamaDaoLiTiOTF;
    src: url('/static/font/AlimamaDaoLiTi.ttf');
}
</style>

# 字体图标

@font-face 还有一个常见用途是加载字体图标。

web中加载字体图标，有 unicode直显 和 伪元素+content 2种方式。

由于App平台不支持伪元素，所以跨平台的写法就是 unicode直显。

有些字体图标网站导出代码时，默认使用伪元素+content方式，需要注意这个坑，改用 unicode直显。

unicode直显方式的性能优于伪元素方式，但源码阅读的直观性略差。

注意text组件直显unicode，需要用 {{'\u'}} 的方式包裹。另外注意实体字符和unicode的区别。

<style>
  @font-face {
  font-family: UniFontFamily;
  src: url('./uni.ttf');
}
</style>

<!-- 直接在 text 里放 Unicode 实体 -->
<text style="font-family: UniFontFamily;">{{'\ue100'}}</text>
<!-- 使用实体字符 -->
<text style="font-family: UniFontFamily;">&#xe100;</text>

示例源码如下，请查看 pre > code 标签中的内容

<style>
  @font-face {
  font-family: UniFontFamily;
  src: url('./uni.ttf');
}
</style>

<!-- 直接在 text 里放 Unicode 实体 -->
<text style="font-family: UniFontFamily;">{{'\ue100'}}</text>
<!-- 使用实体字符 -->
<text style="font-family: UniFontFamily;">&#xe100;</text>

# App平台内置字体图标 uni-icon

HBuilderX4.33+

app平台的内置组件和API用到了一些字体，同时共享出来给开发者，也可以使用这些内置字体。

内置 uni-icon 字体图标示例：

<template>
  <!-- 静态字体图标 -->
  <text style="font-family: uni-icon;font-size: 64px;">{{'\uEA08'}}</text>
  <!-- 动态赋值字体图标 -->
  <text style="font-family: uni-icon;font-size: 64px;">{{uniIcon}}</text>
</template>

<script setup lang="uts">
  const uniIcon = ref<string>('\ue601')
</script>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <!-- 静态字体图标 -->
  <text style="font-family: uni-icon;font-size: 64px;">{{'\uEA08'}}</text>
  <!-- 动态赋值字体图标 -->
  <text style="font-family: uni-icon;font-size: 64px;">{{uniIcon}}</text>
</template>

<script setup lang="uts">
  const uniIcon = ref<string>('\ue601')
</script>

内置 uni-icon 包括以下图标：



forward



back





favorites



home







down



circle



info



info circle



success



success circle



success no circle



cancel circle



warn



clear



download



waiting



# Tips

字体路径支持网络和本地，本地字体请注意放在项目或uni_modules的static目录下。
全平台均支持ttf和otf字体格式，其他字体格式在不同平台支持度有差异，另见css字体
@font-face是不可编程的，如需编程控制，另见uni.loadFontFace
@font-face下仅支持 font-family 和 src，不支持通过font-weight 、 font-style等属性控制该字体统一样式，如果需要设置字体样式，请在具体的text组件上使用class或style定义字体样式。