我有下面的 HTML 代码来制作一个 textarea(它使用了 Microsoft UI Fabric 的一个类，但它不是很重要)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<link href="Office.css" rel="stylesheet" type="text/css" />
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
<link href="Common.css" rel="stylesheet" type="text/css" />
<script src="Notification.js" type="text/javascript"></script>
<script src="Home.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
</head>
<body class="ms-font-m">
<div id="content-main">
<div class="padding">
<div class="ms-TextField ms-TextField--multiline">
<textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px">
ABCDEFGHIJKLMNOP
abcdefghijklmnop
</textarea>
</div>
</div>
</div>
</body>
</html>
结果如下:
正如我们所看到的，与eg，stackoverflow的问题编辑器不同，我的textarea中每个字符的宽度是不一样的。在没有 css 的普通 html 中，有谁知道如何制作一个文本区域，使得其中每个字符的宽度始终相同？如果我还想使用Microsoft UI Fabric的css，应该在哪里修改呢？
最佳答案
问题是 fabric.components.css 有这个:
.ms-TextField.ms-TextField--multiline .ms-TextField-field {
font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}
因此，要么修改您的 HTML 类以防止该选择器选择您的文本区域，要么在更具体的选择器中设置默认的 font-familiy: monospace。
@import 'https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css';
@import 'https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css';
.ms-TextField.ms-TextField--multiline .ms-TextField-field {
font-family: monospace;
}<div id="content-main">
<div class="padding">
<div class="ms-TextField ms-TextField--multiline">
<textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px">
ABCDEFGHIJKLMNOP
abcdefghijklmnop
</textarea>
</div>
</div>
</div>关于html - 制作一个文本区域，其中每个字符的宽度始终相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37366871/