Html 如何使用 CSS 控制光标/插入符号的大小

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6090893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:43:26  来源:igfitidea点击:

How to control cursor/caret size with CSS

htmlcss

提问by cmwright

I'm trying to control the caret size in a html textarea. The size seems to default to the line height, is there a way to manually control it?

我正在尝试控制 html textarea 中的插入符号大小。大小似乎默认为行高,有没有办法手动控制?

采纳答案by rid

There isn't any way to change how the caret looks in a textarea. If you want to do that, you'll have to use something other than a textarea, such as a div or a canvas element and control everything with JavaScript.

没有任何方法可以更改插入符号在 textarea 中的外观。如果你想这样做,你必须使用 textarea 以外的东西,比如 div 或 canvas 元素,并用 JavaScript 控制一切。

回答by squarecandy

Worth noting that some fonts the default size and position of the cursor just looks weird. If this is a high priority for you, it might be worth at least considering switching to a different font. Here is an example of one Google font that looks super weird and two that don't:

值得注意的是,某些字体的默认大小和光标位置看起来很奇怪。如果这对您来说是一个高优先级,那么至少考虑切换到不同的字体可能是值得的。这是一个看起来非常奇怪的谷歌字体和两个不奇怪的谷歌字体的例子:

example of Cutive Google Font with odd caret positioning

带有奇怪插入符号位置的 Cutive Google Font 示例

example of Abel Google Font caret

Abel Google Font 插入符号示例

example of Roboto Condensed Google Font caret

Roboto Condensed Google Font caret 示例

You might also have luck generating your webfont files with different settings. The font squirrel webfont generatorin Expert Mode has settings for vertical metricsand x-height matchingthat may help with this issue. Most paid webfonts from different foundries also have similar export settings now. Definitely a time consuming task to tweak settings, export repeatedly, install the new files and check your work, but can often be worth it.

您也可能有幸使用不同的设置生成 webfont 文件。专家模式中的字体松鼠网络字体生成器具有垂直度量x 高度匹配的设置,可能有助于解决此问题。来自不同代工厂的大多数付费网络字体现在也有类似的导出设置。调整设置、重复导出、安装新文件和检查您的工作绝对是一项耗时的任务,但通常是值得的。