Google打印没有彩色,浏览器打印预览没有背景颜色和没有颜色

原因:google 浏览器的打印不出现背景颜色,是因google浏览器的打印有自己定义的样式,有些会覆盖个人写的样式。

颜色

根据css优先级规则,css属性后面加“!important”的优先级最大,无条件绝对优先(比内联样式还要优先)
在所需的元素上,有颜色的样式里面都加入“!important”

背景颜色

如果背景颜色在后面加“!important”不显示,在所需的元素上设置CSS属性:

-webkit-print-color-adjust: exact;

注意:在当前所需要的标签上加样式。例如表格直接写样式名可能不显示,当指定td的会显示背景颜色。

例子:
HTML

<table border="0"  class="table">
	<tbody>
		<tr>
			<td colspan="1" class=""outside>
				测试背景颜色
			</td>
		</tr>
	</tbody>
</table>

CSS
下面,成功显示td背景颜色

td.outside {
   background: #FBFBFB !important;
    -webkit-print-color-adjust: exact;
}

下面,没有背景颜色

.outside {
    background: #FBFBFB !important;
    -webkit-print-color-adjust: exact;
}
<think>好的,我现在需要帮助用户了解如何通过Glyphs 3创建可变字体彩色字体。首先,我需要回顾之前用户的问题之前的回答,确保这次回答的一致性相关性。 用户之前询问了关于彩色字体设计立体效果文字,我详细介绍了COLR v1CPAL表的使用,以及分层设计的方法。现在用户转向Glyphs 3的具体操作,想知道如何用它创建可变字体彩色字体。这说明用户可能是一位字体设计师或相关领域的从业者,希望实际应用这些技术。 接下来,我需要考虑用户的需求。他们可能希望得到步骤清晰的指导,涵盖可变字体彩色字体两个方面。需要区分这两个主题,但也要注意Glyphs 3中两者的结合使用。同时,用户可能需要知道一些常见问题的解决方法,比如兼容性、工具设置等。 首先,可变字体的创建。我需要解释Glyphs 3中的轴(如Weight、Width)、如何设置母版、插值生成中间样式。可能还需要提到测试导出的步骤,以及注意事项,比如轴的限制、命名规范等。 然后是彩色字体的创建。这里需要涉及COLR/CPAL格式,Glyphs 3中的图层管理,颜色定义,渐变叠加效果。可能需要具体说明如何添加图层、设置颜色、导出选项,以及兼容性处理,比如SVG备用方案。 还要考虑用户可能遇到的困难,比如轴设置错误导致插值问题,颜色层顺序影响渲染效果,或者导出格式选择不当。需要给出解决方法工具推荐,比如使用Axis Praxis测试可变字体,使用浏览器检查COLR支持。 此外,用户可能对实际应用案例感兴趣,比如如何结合可变字体彩色字体,但用户没有明确问,所以可能需要简要提及,但重点还是步骤操作。 需要确保回答结构清晰,分点说明,每一步都有具体的操作指导,可能还需要代码示例或界面截图,但文本回复中无法提供图像,所以用伪代码或路径描述代替。 最后,总结关键点,强调Glyphs 3的优势注意事项,帮助用户高效完成设计。可能还需要提醒用户查阅官方文档或社区资源,以获取更多支持。</think>以下是关于**使用Glyphs 3创建可变字体(Variable Fonts)彩色字体(Color Fonts)**的详细指南,分步骤说明核心操作与技术要点: --- ### **一、可变字体(Variable Fonts)创建** #### **1. 基础概念** - **可变字体**:通过**设计轴(Axis)**(如字重、字宽、倾斜度等)控制字形动态变化,单一文件涵盖多种样式。 - **常用轴**: - `Weight`(字重,如`wght`轴) - `Width`(字宽,如`wdth`轴) - `Optical Size`(视觉尺寸,如`opsz`轴) - 自定义轴(如斜体`slnt`轴) #### **2. 具体步骤** **a. 定义设计轴** 1. 打开Glyphs 3,进入 **File > Font Info > Font** 2. 在 **Axes** 标签页中添加轴(如`wght`): - **Axis Tag**:`wght` - **Name**:Weight - **Min/Max/Default**:例如`100`(细)到`900`(粗),默认值`400` **b. 创建母版(Masters)** 1. 在 **Masters** 标签页中添加至少**两个母版**(如“Light”“Bold”): - **Location**:设置每个母版的轴位置(如`wght=100``wght=900`) - **Layer**:每个母版对应一个独立的字形设计层 **c. 设计字形插值** 1. 在字形编辑窗口(如字母“A”)中,确保不同母版的**节点结构一致**(关键点数量位置对齐) 2. 使用 **View > Show Axis Preview** 实时预览插值效果 **d. 生成可变字体** 1. 导出字体时选择 **File > Export**,勾选 **Variable Font** 选项 2. 验证文件:使用 [Axis Praxis](https://www.axis-praxis.org/) 测试可变轴效果 #### **3. 注意事项** - **节点一致性**:不同母版的路径节点必须严格对齐,否则插值会失败 - **轴限制**:避免过多自定义轴(通常不超过4个),否则可能影响性能 - **命名规范**:遵循OpenType轴标签标准(如`wght`、`wdth`) --- ### **二、彩色字体(Color Fonts)创建** #### **1. 支持格式** Glyphs 3原生支持以下彩色字体格式: - **COLR/CPAL**(微软/谷歌标准,兼容现代浏览器系统) - **SVG**(矢量嵌入,兼容性更广但文件较大) #### **2. 具体步骤(以COLR/CPAL为例)** **a. 定义颜色调色板** 1. 进入 **File > Font Info > Font > Master** 2. 在 **Color Palettes** 中添加调色板(如“Primary Colors”): - 定义颜色索引(如`0: #FF0000`,`1: #00FF00`) **b. 设计多层字形** 1. 打开字形编辑窗口(如字母“B”),通过 **Layer > Add Layer** 创建多个图层 2. **分配颜色**: - 选择图层,在右侧 **Layer Attributes** 中设置 **Color** 为调色板索引(如`Palette 0, Index 0`) - 支持透明度(Alpha通道) **c. 配置COLR表** 1. 进入 **File > Font Info > Font > Features** 2. 添加COLR特性,关联图层与颜色: ```python # 示例:将图层1关联为红色,图层2关联为绿色 colr { layer 0 "A.background" palette 0 index 0; # 红色背景 layer 1 "A.foreground" palette 0 index 1; # 绿色前景 } ``` **d. 导出彩色字体** 1. 导出时勾选 **Export COLR/CPAL Table** 2. 测试:在支持COLR v1的浏览器(如Chrome)中预览 #### **3. 高级技巧** - **渐变效果**:通过COLR v1的`PaintLinearGradient`定义渐变(需Glyphs 3.2+) - **图层叠加模式**:设置`blendMode`(如正片叠底、滤色)增强颜色混合 - **SVG备用**:同时导出SVG格式以兼容旧系统 --- ### **三、可变字体+彩色字体结合** Glyphs 3支持**可变彩色字体**(如字重变化时颜色渐变): 1. 在可变轴(如`wght`)的不同母版中,调整图层颜色或透明度 2. 确保COLR表的颜色索引与轴联动(需手动编写特性代码) 3. 示例:字重从细到粗时,颜色从蓝色渐变到红色 --- ### **四、常见问题与解决** #### **1. 可变字体导出失败** - **原因**:母版节点不一致或轴设置冲突 - **解决**:使用 **View > Show Path Direction** 检查节点结构 #### **2. 颜色不显示** - **原因**:系统或应用不支持COLR v1 - **解决**:导出时同时生成SVG表,或在CSS中提供回退样式 #### **3. 文件体积过大** - **优化方法**: - 减少颜色层数量 - 使用COLR替代SVG - 压缩TTF/OTF文件(如使用`fonttools`) --- ### **五、工具推荐** - **测试工具**: - [Wakamai Fondue](https://wakamaifondue.com/)(分析字体特性) - Chrome DevTools(检查COLR渲染) - **脚本扩展**: - Glyphs 3的Python API(批量处理颜色层或轴设置) --- ### **总结** - **可变字体**:通过轴定义母版插值实现动态样式 - **彩色字体**:依赖COLR/CPAL或SVG的多层颜色设计 - **核心工具**:Glyphs 3的轴配置、调色板功能与图层管理 如需具体操作演示(如渐变联动可变轴),可提供进一步示例! 🎛️🎨
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值