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

使用rem和em作为所有的字母间距、单词间距等。对于font-weight，这是因为初始声明覆盖了您自己的font-weight。

你可能会发现这很有用，我猜。这是最常用的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>

也关于你的问题“字体重量：粗体”不工作也许它被其他值覆盖，如< h1 >使文本已经巨大...

所以你不能在字体声明中使用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元素时引用它。字体的重量是其中的一部分。
下面的代码片段应该会更清楚。我所做的是，我已经导入了2种样式的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>

font-feature-settings属性允许控制OpenType字体中的高级排版功能。这些设置解决了我的情况：

body{
  font-variant: none;
  font-feature-settings: "c2sc", "smcp";
}

JS方式：获取所有文本节点并应用类

1.我们首先选择所有文本节点。
1.然后我们循环遍历它们，并通过getComputedStyle(textNode.parentNode)检查它们的父元素的计算样式属性
1.定义css类规则

let textNodes = textNodesInEl(document.body) 

// add font-family classes
textNodes.forEach(text=>{
  let el = text.parentNode;
  let style = window.getComputedStyle(el);
  let fontFamily = style.getPropertyValue('font-family');
  let fontStyle = style.getPropertyValue('font-style');
  let fontWeight = style.getPropertyValue('font-weight');
  let className = 'font__'+fontFamily.replaceAll(' ', '_').toLowerCase()+'__'+fontStyle;
  let classNameFontWeight = 'fontweight__'+fontWeight;
  el.classList.add(className);  
  el.classList.add(classNameFontWeight);  
})

/**
 * Get text nodes in element
 * based on:
 * https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page#10730777
 */
function textNodesInEl(node) {
    let textNodes = [];
    for (node = node.firstChild; node; node = node.nextSibling) {
        if (node.nodeType == 3) {
            textNodes.push(node);
        }
        else {
            textNodes = textNodes.concat(textNodesInEl(node));
        }
    }
    // filter empty text nodes
    textNodes = textNodes.filter(node => node.textContent.trim())
    return textNodes;
}

body {
  font-family: Georgia;
}

h1 {
  font-family: "Arial";
  font-weight: 700;
}

h2 {
  font-family: "Verdana";
  font-weight: 400;
}

.fontweight__700{
  text-transform: uppercase
}

.font__verdana__normal{
  letter-spacing: 0.05em;
  color:red
}

.font__verdana__italic{
  letter-spacing: -0.05em;
  color: green
}

<h1>Heading 1</h1>

<p>Lorem ipsum dolor sit amet, <span style="font-family:verdana">consectetuer </span> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. <em style="font-family:verdana">Nulla consequat massa quis</em> enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

<h2>Heading 2</h2>

<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>

<table>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td><span style="font-family:verdana;">Col 3</span></td>
  </tr>
</table>

您还可以添加其他属性值，如font-style或font-weight，以进行更具体的过滤。