无论如何使用css将字母和单词间距应用于“字体”？

Question

我有一个自定义字体，代码如下 -

@font-face {
font-family: 'classylight';
url : 'some path';
font-weight:normal;
    }

我想为网站上各处的这种字体专门设置一些值，例如字母间距、字间距和其他样式。我想减少不必要的过程，并寻找attribute=style属性。

我试过了-

body [style="font-family:classylight"] {
letter-spacing:50px;
word-spacing:-20px; 
}

它不工作。任何人都可以帮忙吗？我只想为此使用 css。如果css没有可能，请参考javascript、jquery。

PS - 我不是在寻找直接将样式添加到正文部分的答案，例如

p {
font-family: classylight;
letter-spacing:50px;
word-spacing:-20px; 
    } 

Answer 1

独特的文本颜色和大小，您不能使用attribute=style 属性更改字母间距和字间距。您应该在创建时通过更改笔宽来更改它们，或者您应该在 css 的主体中更改它们。

Answer 2

对所有字母间距、单词间距等使用 rem 和 em。 而对于字体粗细，是因为初始声明覆盖了你自己的字体粗细。

Answer 3

我猜你可能会觉得这很有用.. 这是最常用的 css 文本属性

<h1 style="

text-align: center; 
font-size: 25px;  
color:#FF0000;      
font-family: Arial Black,Arial,Helvetica,Verdana,Trebuchet MS,Comic Sans MS,sans-serif;    
font-style: normal;   
font-weight: 1000;
background-color: #D3D3D3; 
line-height: 3;

">TEST 123</h1>

还有关于您的问题“font-weight:bold”不起作用，也许它被其他值覆盖，例如

，这使得文本已经很大......

Answer 4

所以你不能真正在字体声明中使用letter-spacing。但是，您可以做的是创建一个 class，它具有您想要的字母间距，然后将该类添加到 HTML 元素中。像这样：

@font-face {
   font-family: 'Roboto';
   url : 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap';
   font-weight: normal;
}

@font-face {
   font-family: 'Open Sans';
   url : 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap';
   font-weight: normal;
}
        
.roboto-norm{
   font-family: 'Roboto';
   font-weight: normal;
}
        
.roboto-norm-ltr-spc{
   font-family: 'Roboto';
   font-weight: normal;
   letter-spacing: 0.25em !important;
}
        
.opensans-norm{
   font-family: 'Open Sans';
   font-weight: normal;
}
        
.opensans-norm-ltr-spc{
   font-family: 'Open Sans';
   font-weight: normal;
   letter-spacing: 0.25em !important;
}

<label class="roboto-norm">Normal roboto letter spacing</label>
<br><br>
<label class="roboto-norm-ltr-spc">Custom roboto letter spacing</label>

<br><br>
<br><br>

<label class="opensans-norm">Normal open sans letter spacing</label>
<br><br>
<label class="opensans-norm-ltr-spc">Custom open sans letter spacing</label>

至于font-weight: normal 部分，您使用@font-face 规则所做的是声明字体。它基本上是一种变量，然后在设置 HTML 元素的样式时会引用它。字体的重量是其中的一部分。

下面的 sn-p 应该更清楚。我所做的是我导入了两种样式的Roboto 字体，第一种是常规粗细，又名400，另一种是粗体，又名700。

@font-face {
   font-family: 'Roboto';
   url : 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap';
   font-weight: normal;
}
@font-face {
   font-family: 'Roboto';
   url : 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap';
   font-weight: bold;
}
    
*{
   font-family: 'Roboto';
}
    
#normal{
   font-weight: normal;
}
#bold{
   font-weight: bold;
}

<label id="normal">normal font</label>
<br><br>
<label id="bold">bold font</label>