Question

index.css

document.getElementById('clickbutton').addEventListener('click', function() {
alert('hello ' + document.getElementById("userInput").value);
});

我想根据特定条件在我的React组件index.js文件中使用“包豪斯”字体。您能帮忙使用它吗？

这是我的代码：

  @font-face{
    font-family:"Bauhaus";
    src:local('BAUHS'),
      url('./BAUHS.ttf') format('truetype');
  }

Answer 1

请记住，“ truetype”适用于Safari，Android和iOS（https://css-tricks.com/snippets/css/using-font-face/）。

以这种方式声明字体（只是我的一个项目中的示例）：

@font-face {
font-family: '3dumbregular';
src: url('fonts/3Dumb-webfont.eot');
src: url('fonts/3Dumb-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/3Dumb-webfont.woff') format('woff'),
     url('fonts/3Dumb-webfont.ttf') format('truetype'),
     url('fonts/3Dumb-webfont.svg#3dumbregular') format('svg');
}

支持多种浏览器的多种格式。

在您的示例中，您甚至都错过了“ select”值。加值选择：

<select onChange={this.handleChange} value = {this.state.fontFamilyName}>
           <option value='Arial'>Arial</option>
           <option value='Bauhaus'>Bauhaus</option>
           <option value='Times New Roman'>Times New Roman</option> 
 </select>

如何在React组件渲染中使用字体字体系列？

1 个答案: