所选文字突出显示不匹配字体大小

时间:2016-08-22 23:57:53

标签: html css font-face

我在模态中有一个表单输入,当用户打开模态时,应该为它们预先选择输入中的文本。我遇到的问题是,当选择文本时,突出显示/选择颜色与文本不相符。

我尝试使用线条高度和填充但没有任何东西在文本顶部给我任何空间。我也注意到这只发生在我们在网站上使用的自定义字体(通过@ font-face加载)

下面是它的样子,你可以看到底部有一个漂亮的衬垫,但顶部没有间距:

enter image description here

我希望它选择与网站基本字体一样的文字,就像Helvetica一样,注意顶部和底部是否有填充:

enter image description here

关于我如何纠正这个问题的任何想法,或者它只是我无法控制的字体文件本身的问题?

这是我的代码,虽然这里没有太多,只有你的基本HTML和CSS。

HTML:

 <input #fileNameElement type='text' name='projectName' [(ngModel)]='fileName' placeholder='Give your project a name...' id='focusOnMe'>

CSS:

::selection {
  background-color: $lt-blue;
}

更新:

这似乎是一个Chrome问题,在检查Safari后,一切看起来都不错。

0 个答案:

没有答案