mfc 字体颜色字体粗细_如何在网络上使用颜色字体

最新推荐文章于 2023-06-21 17:52:50 发布

daique1908

最新推荐文章于 2023-06-21 17:52:50 发布

阅读量257

点赞数

文章标签： java css python html js ViewUI

mfc 字体颜色字体粗细

每个网页设计师都知道如何设置字体的颜色，对吗？这是我们开始学习CSS时要做的第一件事。我们选择一种颜色，然后使用样式进行设置，例如color: blue; 或color: purple; ，因此我们选择的字体中的所有字形都变为该颜色，并且只有该颜色。

但是，如果每个字形可以定义多个颜色，该怎么办？如果可以将字母设置为蓝色和紫色，或者在蓝色和紫色之间设置渐变，或者将六个颜色或更多的颜色应用于单个字体家族，该怎么办？

好吧，随着Open Type颜色字体的出现，您可以做到这一点。

查看此图像的四种不同颜色的字体：

这看起来好像是固定在Illustrator中的固定图像，但实际上是在浏览器中查看实时的，可编辑的，搜索引擎可读的文本。

这些字体不是通过CSS来控制其颜色，而是具有内部信息，该信息允许它们在每个字形中具有多种颜色，从而显示出非常醒目的显示效果。

使用颜色字体

彩色字体仍然很新，因此尚未发布大量字体，在可用的字体中，有免费字体和付费字体的组合。为了确保您自己可以使用颜色字体，我为我们的演示选择了四种免费字体。您可以在以下位置获取这些字体的副本：

吉尔伯特在typewithpride.com
鲍鱼 on colorfontweek.fontself.com
colorfontweek.fontself.com上的Playbox
bixacolor.com上的Bixa

用于将它们添加到页面的代码并不是什么新鲜事物，只是您熟悉和喜爱的普通@font-face ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	@font-face {
		font-family: 'Abalone';
		src: url('fonts/Abelone-FREE.otf');
	}
	@font-face {
		font-family: 'Playbox';
		src: url('fonts/Playbox-FREE.otf');
	}
	@font-face {
		font-family: 'Bixa';
		src: url('fonts/NTBixa-Color.woff2');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	.abalone {
		font-family: 'Abalone';
		font-size: 3.8rem;
	}
	.playbox {
		font-family: 'Playbox';
	}
	.bixa {
		font-family: 'Bixa';
	}
	</style>
</head>
<body>
		<a class="gilbert">Gilbert Color Font</a>
		<div class="abalone">Abalone Color Font</div>
		<div class="playbox">Playbox Color Font</div>
		<div class="bixa">Bixa Color Font</div>
</body>
</html>

浏览器和支持

目前，如果您想在浏览器中试用彩色字体，则需要使用Firefox或Edge（这是仅有的两个具有完全支持功能的浏览器）。 Safari仅将支持限制为SBIX格式。 Chrome仅支持Android，然后仅支持CBDT格式。 Opera完全不支持。

CSS修改

目前，我们无法使用CSS更改颜色字体中使用的颜色。但是，字体设计者可能会附带附带许多预设变体的字体。然后可以使用属性font-feature-settings修改这些变体。

通过TypeKit的Robin Rendle的Trajan Color字体演示，我们可以看到此功能的实际作用。

颜色是固定的，即使在链接上

由于颜色字体的颜色固定在字体本身内部，因此通常应用于文本的color属性将完全无效，包括链接的状态如何。

还值得注意的是，尽管链接不会发生颜色变化，但是它们仍然可以应用其默认的下划线文字修饰，并且该下划线将接收您通过CSS指定的任何颜色。如果您决定合并彩色字体和链接，则可能需要使用这样的下划线来帮助用户将链接与文本的其余部分区分开。

这是一些示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	a {
		color: red;
	}
</head>
<body>
		<div class="gilbert">Gilbert Color <a href="#">Link</a></div>
</body>
</html>

这将使我们在最后一个单词上看到红色的下划线：