Google Font Weight 300无法运作 [英] Google Font Weight 300 not working

问题描述

我已经尝试过
这是它的外观我的Chrome：

解决方案

我认为你应该开始从头开始，转到 google字体，搜索opensans字体，然后选择所需的所有类型，然后下载zip 。
一旦下载zip文件，请转到 fontsquirrel ，上传此zip文件字体生成器部分，然后你会得到字体解压缩它们，并将它们添加到项目中的字体文件夹，然后你可以包括styleshit.css中给出的代码，在zip文件从 https://www.fontsquirrel.com/tools/webfont-generator ，它看起来会像这样。

  @ font-face {
 font-family：'open_sansregular'; 
 src：url（'../ fonts / opensans-regular-webfont.eot'）; 
 src：url（'../ fonts / opensans-regular-webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / opensans-regular -webfont.woff2'）format（'woff2'），
 url（'../ fonts / opensans-regular-webfont.woff'）format（'woff'），
 url /fonts/opensans-regular-webfont.ttf'）format（'truetype'），
 url（'../ fonts / opensans-regular-webfont.svg＃open_sansregular'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
 @ font-face {
 font-family：'open_sanssemibold'; 
 src：url（'../ fonts / opensans-semibold-webfont.eot'）; 
 src：url（'../ fonts / opensans-semibold-webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / opensans-semibold -webfont.woff2'）format（'woff2'），
 url（'../ fonts / opensans-semibold-webfont.woff'）format（'woff'），
 url /fonts/opensans-semibold-webfont.ttf'）format（'truetype'），
 url（'../ fonts / opensans-semibold-webfont.svg＃open_sanssemibold'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
  

...以及从谷歌字体中选择的所有字体类型。而添加字体家族只是添加font-family：'open_sansregular';我发现这是最好的解决方案，以避免所有开销和浏览器兼容性，谢谢。

提示：我发现很多次，如果你使用cdn直接链接到字体，那么它可能无法加载，一些浏览器不会得到字体家庭你键入。所以在您的项目中包括字体总是有帮助。

Can't get the 300 weight in google fonts open sans working in Chrome or Chrome Canary.

I already tried this and this in a codepen, to no avail. Works fine in edge.

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<div class="header-pic text-align-center">
  <h1>We make dream places <br> affordable for you.</h1>
</div>

CSS

body {
    font-family: 'Open Sans', sans-serif;
}
.header-pic h1{
    font-size: 80px;
    font-weight: 300;
}

Any ideas?

Edit: For clarification, not working means not showing a difference between 300 and 400. Added screenshots.

Added a comments screenshot and codepen because it shows the indifference clearer.

http://codepen.io/anon/pen/YWVLYE This is how its supposed to be: This is how it looks in my chrome:

解决方案

I think you should start it from scratch, goto google fonts, search for opensans fonts then select what all type you want, then download the zip. Once you download the zip file go to fontsquirrel, upload this zip file in font generater section then you will get fonts unzip them and add them to fonts folder in your project then you can include code given in styleshit.css, in zip file from https://www.fontsquirrel.com/tools/webfont-generator, it will look something like this.

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.eot');
    src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff'),
         url('../fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

...and so on all fonts type which you selected from google fonts. while adding font family just add font-family:'open_sansregular'; I found this is the best solution to avoid all overheads and browser compatibilities, thank you.

Tip : I found many times if you give direct links to fonts using cdn then it may fail to load also some browsers will not get font family you type. So including fonts in your project always helps.

这篇关于Google Font Weight 300无法运作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！