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

Question

索引.css

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

我想根据特定条件在我的react组件index.js文件中使用“Bauhaus”字体。请您帮忙看看如何使用它。

这是我的代码:

 import './index.css';
 class NameForm extends React.Component {
   constructor(props) {
      super(props);
      this.state = {fontFamilyName: ''};

      this.handleChange = this.handleChange.bind(this);
   }
    handleChange(event) { 
     this.setState({fontFamilyName: event.target.value});
    } 
    render() { 
      return ( 
            <div> 
                <select onChange={this.handleChange}>
                   <option value='Arial'>Arial</option>
                   <option value='Bauhaus'>Bauhaus</option>
                   <option value='Times New Roman'>Times New Roman</option> 
                </select> 
                <p style={{fontFamily:this.state.fontFamilyName}}>Some Text here</p>
            </div> ); 
     }
   }

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>