字母组合“fi”和“fl”不被浏览器显示 [英] Combinations of letters "fi" and "fl" is not displayed by browsers

问题描述

我有以下问题：我的网站的

我从 Google字体中选择了webfont Fira Sans Condensed （拉丁文，拉丁文扩展，西里尔文，西里尔文扩展）。为了生成字体格式，我使用了 Font Squirrel ，它使用 .woff 和 .woff2 。

包含下一个css代码的字体：

  @ font-face {
 font-family：'firasanscondensed'; 
 font-style：normal; 
 font-weight：400; （''/ fonts / firasanscondensed-regular.woff2'）格式（'woff2'），url（'../ fonts / firasanscondensed-regular.woff'）格式（'woff'）; 
 src：url 
} 
 
 @ font-face {
 font-family：'firasanscondensed'; 
 font-style：normal; 
 font-weight：700; （''/ fonts / firasanscondensed-bold.woff2'）格式（'woff2'），url（'../ fonts / firasanscondensed-bold.woff'）格式（'woff'）; 
 
  

  body {
 font-family：'firasanscondensed'，sans-serif; 
 
 
 
 $ b 
我的内容正确显示，除了字母fi和fl 。例如：无线网络显示像Wi-。
 
 
为了解决这个问题，我尝试使用更多的字体扩展（  .eot ，  .ttf ），顺序不同，但情况没有改变。我使用 Google Fonts 方法包括：< link href =https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,700& amp; subset = cyrillic，cyrillic-ext，latin-extrel =stylesheet> 。用这个方法我的问题正在解决！但对我来说，原则上在本地包含字体。
 
 
 
我在以下浏览器中看到了这个问题：Google Chrome 55.0.2883.87; Mozilla Firefox 51.0.1。在IE10中没有出现这个问题！ 
 
 
提前谢谢！ 
解决方案
试试这个对象是字体渲染的元素（或body）。
 
 
  body {
 font-feature-settings：liga1; 
 
 $ / code> 
您可能需要供应商前缀：
 
 
  body {
 -webkit-font-feature-settings：liga1; 
 -moz-font-feature-settings：liga1; 
 -ms-font-feature-settings：liga1; 
 font-feature-settings：liga1; 
 
 
 
 
 
 $ b 
可以用这种方式切换的功能（如果字体支持它们） 
 $ b 
 
 
 liga：标准连字
 
 
 dlig：自由裁剪连字
 $ b $ 
 
 lnum：衬砌数字
 
 
 tnum：表格数字
 
 
零：削减零
 
 
压裂：小数
 
 
 sups：上标
 
 
 
 
 smcp：小型大写字母
 
 
 c2sc：小写大写字母
 
大小写敏感表单
 $ 
 
 hlig：历史连字
 
 calt：上下文替换
 
 
 swsh：花饰
 hist：历史表单 
 
 ss **：风格集
 
 kern：kerning 
 
 
 locl：localized forms 
 
 
 rlig：所需连字
 
 
 medi：中间表格
 
 
初始表格
 
 
 isol：隔离表单
 
 
 fina：最终表单
 
 
标记：标记
 
 
 mkmk：标记到标记定位
  
 
 
甚至可以合并成一个这样的规则： 
 
 
  .element {
 font-feature-settings：liga1 ，dlig1; 
} 
  
 
I have the following problem:


for my website I chose webfont 'Fira Sans Condensed' from Google Fonts (Latin, Latin Extended, Cyrillic, Cyrillic Extended). For generating font formats I have used Font Squirrel, which generated for me files with .woff and .woff2 extensions.

I include font with next css-code:
@font-face {
  font-family: 'firasanscondensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/firasanscondensed-regular.woff2') format('woff2'), url('../fonts/firasanscondensed-regular.woff') format('woff');
}

@font-face {
  font-family: 'firasanscondensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/firasanscondensed-bold.woff2') format('woff2'), url('../fonts/firasanscondensed-bold.woff') format('woff');
}


body {
  font-family: 'firasanscondensed', sans-serif;
}
My content displayed correctly except for combinations of letters "fi" and "fl". For example: "Wi-fi" dispays like "Wi- ".

To solve the problem I tried to include font with more font-extensions (.eot,.ttf) and in a different order, but situation has not changed.

Then I used Google Fonts method of including: <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">. With this method my problem is solving! But for me it's in principle to include fonts locally.

I see the issue in the following browsers: Google Chrome 55.0.2883.87; Mozilla Firefox 51.0.1. In IE10 the problem does not appear!

Thank you in advance! 
解决方案
Try this against the element in which the fonts are rendering (or body).
body {  
  font-feature-settings: "liga" 1;
}
You might need vendor prefixes:
body  {
  -webkit-font-feature-settings: "liga" 1;
  -moz-font-feature-settings:    "liga" 1;
  -ms-font-feature-settings:     "liga" 1;
  font-feature-settings:         "liga" 1;
}
The features that can be toggled this way (if the font supports them) are..


liga: standard ligatures
dlig: discretionary ligatures
onum: old style figures
lnum: lining figures
tnum: tabular figures
zero: slashed zero
frac: fractions
sups: superscript
subs: subscript
smcp: small caps
c2sc: small capitals from capitals
case: case-sensitive forms
hlig: historical ligatures
calt: contextual alternates
swsh: swashes
hist: historical forms
ss**: stylistic sets
kern: kerning
locl: localized forms
rlig: required ligatures
medi: medial forms
init: initial forms
isol: isolated forms
fina: final forms
mark: mark
mkmk: mark-to-mark positioning


They can even be combined into one rule like this:
.element {
  font-feature-settings:"liga" 1, "dlig" 1;
}


                        
这篇关于字母组合“fi”和“fl”不被浏览器显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！