gpt4 book ai didi

html - 如何将后备字体应用于所有文本,而不仅仅是缺失字符

转载 作者:行者123 更新时间:2023-11-28 01:04:48 24 4
gpt4 key购买 nike

有没有办法将后备字体应用于整个段落?例如,我有一些文本可以是拉丁文或西里尔文或这两种符号。我只想对拉丁文本使用一种字体,而对西里尔文/混合文本使用另一种字体。可能吗?

这是一个例子:

p {
font-family: Lato, Montserrat;
font-size: 2rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<p>Some latin text.</p>
<p>Здесь кирилица.</p>
<p>And here some смешанный text.</p>
</body>

我想将 Monterrat 应用于整个第 3 段

最佳答案

好吧,如果你想不惜一切代价避免一点点字体闪烁,我建议在此处进行服务器端处理 - 如果你想在服务器上节省一点性能,我会在客户端使用 javascript:

CSS:

.font-montserrat {
font-family: Montserrat;
}

和带有 jQ​​uery 的 js(服务器端,您可以在渲染期间调整它并放入一些 php 函数或您使用的任何语言):

 $('p').each(function() {
var p = $(this);

// here it is important to avoid other inline tags like b, i, span, etc
var textWithoutOtherTags = p.text();

// this is the main bit and one would simply test by a regular expression
// - this can be adapted as needed, at the moment it returns true, if a
// single latin or cyrilic letter is present
var hasLatin = /[a-z]/gi.test(textWithoutOtherTags);
var hasCyrilic = /[а-я]/gi.test(textWithoutOtherTags);

// now add the class depending on the containing characters
if (hasLatin && hasCyrilic) {
p.addClass('font-montserrat');
}
});

您当然也可以在没有 jQuery 的情况下轻松完成,但是请注意 b、i、strong、span 和其他内联标记,它们可能出现在您的 p 内部,并在正则表达式测试之前将它们过滤掉。

干得漂亮 ;)

关于html - 如何将后备字体应用于所有文本,而不仅仅是缺失字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52442004/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com