Question

我一直在尝试使用自定义字体
但是它没有显示在我的网站上。

function App() {
  return (
    <div className="App">
      <ValidatorForm onSubmit={() => {}} className="" autoComplete="off">
        <FormControl>
          <InputLabel shrink={true} htmlFor="age-simple">
            Age
          </InputLabel>

          <SelectValidator
            required
            value=""
            name="name"
            displayEmpty
            validators={["required"]}
            errorMessages={["this field is required", "email is not valid"]}
            inputProps={{
              name: "age",
              id: "age-simple",
              shrink:true
            }}
            SelectProps={{
              displayEmpty: true,
              shrink:true
            }}
            input={<Input id="age-simple" />}
            className=""
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </SelectValidator>
        </FormControl>
        <Button type="submit"> submit</Button>
      </ValidatorForm>
    </div>
  );
}

/*TEXT*/
p.fontcheck {
    font-family: MTCORSVA bold;
    font-weight: normal;
    font-style: normal;
}


/*fonts*/
@font-face {
font-family: "MTCORSVA";
src: url("/eccube_1/html/template/default/css/fonts/MTCORSVA.TTF") format("TTF");
}

我也尝试在整个路径中使用<p class="fontcheck">HELLO TEST</p>，或者也插入了URL。
结果未出现。
我在服务器中字体的原始路径是

HTTP or HTTPS

Answer 1

尝试一下，这行得通！

/*TEXT*/
p.fontcheck {
    font-family: MTCORSVA bold;
    font-weight: normal;
    font-style: normal;
}


/*fonts*/
@font-face {
font-family: MTCORSVA;
src: url(http://azlily.bex.jp/eccube_1/html/template/default/css/fonts/MTCORSVA.TTF);
}

<p class="fontcheck">HELLO TEST</p>

无法将fontface用于自定义字体

1 个答案: