- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
通常在我的代码中,我会使用一些不同的字体和一些变体,例如:
为此我使用了 CSS-IN-JS 库 styled-components
,所以没有使用一些 styles.css
。有时设计师会来找我并要求更改,例如Arial
到 Comic Sans
for font-style: italic;
和 font-weight: 400;
这不能通过在元素代码库中简单替换来编写代码,因为该字体还有其他变体。
我想尽量减少合并该更改所需的工作量,因此需要将这些字体对象隔离在一个地方。
问题:
我为此设计了 3 种方法,第 3 种似乎是最好的方法,但请根据您的经验提出建议。也许下面指定的每一个都有一些额外的缺点或优点?
方法:
第一种方法
我考虑过将这些文本定义提取到单独的 style-components
中,例如:
const ArialGeneral = styled.span`
font-family: Arial;
font-style: normal;
font-weight: 400;
`
const ArialNormal = styled(ArialGeneral)``
const ArialNormalItalic = styled(ArialGeneral)`
font-style: italic;
`
然后用相关样式包装所有出现的文本。
...
<HeroText>
<ArialNormal>
Welcome to our system!
</ArialNormal>
</HeroText>
...
缺点是:
额外的 JSX 标签
可能需要一些计算成本来重新渲染这些额外的组件以及浏览器的 CSS 计算
优点:
[font-family, font-style, font-weight]
组合第二种方法
使用相同的技术,但不是定义 styled-component
,而是使用全局 styles.css
,以类的形式具有基本相同的定义,例如:
.font-arial-normal {
font-family: Arial;
font-style: normal;
font-weight: 400;
}
这将需要用一些类来装饰文本元素,例如:
...
<HeroText className="font-arial-normal">
Welcome to our system!
</HeroText>
...
缺点:
使用两种格式 CSS-in-JS 和 styles.css
向 JSX 添加 classNames
优点:
与变体 1 相比,不需要额外的 JSX 编译资源
与变体 1 相同的好处
第三种方法
我在这篇文章中看到了WebType Best practices for using font-weights并且在我正在下载的网络字体包示例中,[font-family, font-style, font-weight]
的每个组合都被定义为单独的字体,例如就像上述资源中的示例(假设这些都是 font-style: normal;
):
{ font-family: "Interstate Light"; font-weight: normal; }
{ font-family: "Interstate Medium"; font-weight: normal; }
{ font-family: "Interstate Regular"; font-weight: normal; }
{ font-family: "Interstate Semibold"; font-weight: bold; }
{ font-family: "Interstate Bold"; font-weight: bold; }
{ font-family: "Interstate Extrabold"; font-weight: bold; }
{ font-family: "Interstate Black"; font-weight: bold; }
缺点:
优点:
除了定义字体的 fonts.css
(我在所有变体中都使用它)之外,我们没有使用任何其他东西,因此消除了 使用两种格式 CSS-in-JS 和styles.css
第二种方法的问题
可以在 JS-IN-CSS 中使用,因为我现在正在使用它,并且代码库范围内的替换将仅更改那些字体(我正在尝试实现的),因此与变体 1 中的好处相同
最佳答案
我认为您需要回答的最重要的事情是字体变体将在您的应用程序中出现。它们是全局性的吗?您是否只需要将它们用于某些标签(即 h1
、h2
等)?您是否需要特定于少数组件的特定覆盖?
根据我的经验,通常每个应用只声明 1 或 2 种字体,而且这些通常是应用范围内的。我很少看到这些字体被非常具体地使用(即 1 或 2 个具有特定类或 ID 的元素),而是倾向于放置在 body
上。
第一种方法
假设仅使用单一字体系列(即“Arial”、“open sans”等),第一种方法将很难扩展。正如您所提到的,它不仅会产生很多噪音,而且如果您以字体名称命名组件,那么在您切换字体系列时它很快就会过时。这将需要对您的应用程序进行相当多的编辑。我不推荐这种方法,除非您喜欢在需要更新时编辑许多文件。
第二种方法
这种方法稍微好一些,因为您现在已经减少了 HTML 噪音,但是您在这里获得的 yield 很少。您仍然遇到与第一种方法相同的问题,只是形式略有不同。更改字体可能意味着重命名类选择器,这也意味着更新使用该类名称的任何组件。
第三种方法
在我看来,这是解决您需求的最佳方法,尽管您似乎确实希望尽可能多地将所有内容保留在样式化组件中。在这种情况下,我会稍微调整一下这种方法。
替代方法
我相信 @font-face
方法与 styled-component 的 injectGlobal
搭配使用API 将为您带来最大的好处(他们甚至在文档中提到了 @font-face
!)
换掉字体系列意味着一次性更新您的@font-family
定义和更新您的font-family
声明。更好的是,您可以避免使用 .css
文件并将所有内容保存在 styled-components 中!
同样,假设您的目标是在整个应用程序范围内定位字体,可能在一两个标签上使用变体(h2
、h2
等),这允许您在 1 个地方进行所有编辑,我相信最能实现您的目标。
看看 @font-face
文档以了解如何声明您的字体样式,以防您不熟悉它。我知道有很多资源可以帮助指导您声明 @font-face
(假设您还没有使用 Google 字体之类的东西)。
关于javascript - 在 React.js 应用程序中处理字体定义的可扩展方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48396979/
我有一个包含数字和整数的文件,我只想读取整数, 如果它们令人讨厌,请忽略宏,但是我只需要有整数,但是我必须确保还要读取字符串,然后忽略它们 我必须在这里修改什么: #include #include
我有一个这样格式化的txt文件: MyDepartureTown MyDestinationTown 123.45 Vehicle 12 我正在尝试将数据导入到我的 C 程序中。这是我用来实现这一目标
我创建了一个简单的文件,使用 flex,它生成了一个文件 lex.yy.c,现在,我想把它放到 C++ 程序中。 %{ #include %} %% stop printf("Stop co
我的一个程序用 c++ 代码生成一个大文件。有没有办法从另一个C++类调用将生成的代码插入其中? 这是一个小例子,可以清楚地说明我想要实现的目标。 生成的文件示例: FirstClass first
我需要了解我的程序“检查输入十六进制消息的第三个位置” 程序将采用十六进制值输入消息。例如0x0123456789abcdef 程序将检查输入消息的第三个位置,即 0 现在程序将采用另一条十六进制值的
当我将输入从输入文件重定向到 yacc 程序时,在它完成解析文件后,我希望 yacc 解析器打印其所做操作的摘要。如果我通过键盘输入内容然后按 Ctrl+D,我希望它执行相同的操作。有办法做到这一点吗
我正在扫描该文件,但它有两种不同的结构。 文件: ParisRoubaix "Marco MARCATO" 33 UAD ITA 26 5:43:31 ParisRoubaix "Sam BEWLEY
我想将winsock2.lib 添加到我的程序中,但不希望将其包含到最终的可执行文件中。有什么方法可以让我动态加载与winsock2关联的dll吗?如果没有,是否有任何 dll(Windows 附带)
我尝试了一个基本程序来将数据从数据库表检索到java程序中。编译结束后,运行代码时出现异常。控制台中没有显示错误。显示异常消息 import java.sql.*; public class clas
我想用 C++ 创建一个跨平台安装程序。它可以是任何压缩类型,例如 zip 或 gzip,像普通安装程序一样嵌入程序本身。我不想在不同的平台、linux 和 windows 上创建很多更改。如何跨平台
每次尝试用鼠标输入两个顶点时,我都会崩溃。我最近改变了组织每个形状的方式,以确保新形状与旧形状重叠。 这个项目的想法是制作各种交互式 Canvas 。用户可以在直线、三角形和矩形之间进行选择,然后选择
我想在我的程序中显示以下文本。当我在 python 中粘贴以下文本时,它会将反斜杠解释为转义序列并弄乱我的 ascii 艺术..任何解决这个问题的想法极客。这是我的文本想出现在我的节目中 _ _
我正在尝试加载名为 Tut16_ReadText.txt 的文件,并使其运行程序以输出其重或轻。 我收到了粘贴在下面的错误。我无法抽出时间让这个程序运行。谁能解释一下我必须做什么才能使这个程序正常工作
我想使用命令行将列表作为参数传递,例如: $python example.py [1,2,3] [4,5,6] 我希望第一个列表 [1,2,3] 成为 first_list,[4,5,6] 成为 se
在分析 C# 应用程序时,我发现名为“ThePreStub”的系统 (?) 方法中有相当多的 CPU 使用率。这是什么? 最佳答案 参见:CLR Inside out - The Performanc
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
我正在用 Python 开发一个游戏,想知道如何给它自己的图标。我使用的是 Windows 计算机,没有安装 Python 的额外东西。哦,我也在使用 3.3 版,这甚至可能吗? P.S 我在 Sta
我正在使用 tkinter 使用 Python 开发一个项目,该项目将允许对 IP 地址进行地理定位。我有原始转换,我可以获取 IP 地址并知道城市、州、国家、经度、纬度等。我想知道是否有任何方法可以
我编写了一个程序,您可以在其中选择任意数字并将其与任意数字的幂相关联。代码运行正常,直到它到达某个部分,然后我必须输入一个字符以使其移动到代码的下一部分。这就是我的意思: #include int
我正在编写“HACKING Art Of Exploitation”一书练习 Convert2.c 第 61 页。 这是我的代码。下面是我的问题。 #include void usage(char
我是一名优秀的程序员,十分优秀!