为什么在可编辑的div中附加文本的字体系列会发生变化？
在可编辑的div（contenteditable="true"）中附加文本时，字体系列可能会发生变化，这通常是由于以下原因：
原因：
- 继承问题：新附加的文本可能会从其父元素或祖先元素继承字体系列，而这些元素的字体系列可能与div内的其他文本不同。
- CSS样式冲突：可能存在与新附加文本相关的CSS样式规则，这些规则覆盖了原有的字体系列设置。
- 浏览器默认样式：不同的浏览器可能对可编辑div中的文本有不同的默认样式，包括字体系列。
- JavaScript操作：如果在附加文本时使用了JavaScript，并且这些脚本无意中修改了字体系列，那么这也可能是原因之一。
解决方法：
- 明确设置字体系列：确保可编辑div及其父元素具有明确的字体系列设置。例如：
#editable-div {
font-family: 'Arial', sans-serif;
}- 检查并调整CSS规则：审查相关的CSS文件，查找可能影响新附加文本字体系列的规则，并进行相应的调整。
- 使用浏览器开发者工具：利用浏览器的开发者工具（如Chrome的DevTools）来检查新附加文本的实际应用样式，找出可能的冲突或覆盖。
- JavaScript调试：如果使用了JavaScript来操作文本，请确保这些脚本不会无意中更改字体系列。可以通过添加日志或断点来进行调试。
示例代码：
假设我们有一个可编辑的div，并且我们希望在用户输入时保持一致的字体系列。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable Div Font Consistency</title>
<style>
#editable-div {
font-family: 'Arial', sans-serif;
border: 1px solid #ccc;
padding: 10px;
width: 300px;
min-height: 100px;
}
</style>
</head>
<body>
<div id="editable-div" contenteditable="true">Type something here...</div>
</body>
</html>在这个示例中，我们明确设置了#editable-div的字体系列为'Arial'，并确保在用户输入时保持一致。
参考链接：
相关·内容
我试图通过从列表中选择字体来更改出现在文本区域和容器中的文本的字体系列和字体大小，字体大小应该是固定的。当选择字体时，我也会尝试更改背景的颜色。option>
<option value="'ms comic sans'">MS Comic Sans<
浏览 1提问于2011-10-05得票数 31
回答已采纳
important; This is not inside span.</span>
</div> 做更多的编辑只会暴露出更多的不一致。如何修复它？如何将div中的所有文本都设置为monospace字体？我尝试删除!important，但无济于事。删除<
浏览 47提问于2021-08-05得票数 1
回答已采纳
当您创建Safari时，包含Buefy/Bulma样式表，在contentEditable中打开网页，将光标放在可编辑的div中，然后尝试输入文本，Safari就会冻结。触发错误的HTML：我使用的是Safari v13.0.3和Buefy v0.8.8。
浏览 1提问于2019-12-13得票数 0
我已经创建了一个可编辑的div，希望选择文本的某个部分，并希望在单击不同的字体系列按钮时更改其字体系列。它会更改，但也会保留先前的选择
$('#message_div').on('selectstart', function () { $(document).one('mo
浏览 0提问于2014-07-04得票数 0
> </body>我只想让我的文本在跨度中垂直对齐。编辑(justinw的答案)：我在jsfiddle中的代码，你粘贴在评论中，在FF和Chromium中都显示错误：
至于第二个链接，在jsfiddle中使用flex，字体太小，所
浏览 0提问于2020-09-24得票数 1
2回答
我需要在网页上逐行翻转文本，以便从RTL写入模式切换到LTR写入模式。在源代码中，需要保留原始的RTL拉丁字母文本，但在页面上，我需要可视化具有非拉丁字体系列的LTR文本(文本将保留为拉丁字符，只有字体系列发生变化)。我的问题是，我如何做到这一点？我怎么知道浏览器什么时候会断线呢？
(如果你听说过匈牙利的北欧字
浏览 0提问于2011-11-16得票数 1
回答已采纳
4回答
我想在页面中使用以下字符：(它是向下箭头字符)。有没有办法改变它的大小？我甚至不确定它的初始大小是如何确定的--我们可以对它应用字体大小吗？或者我可以以像素为单位指定其确切的宽/高？
谢谢
浏览 3提问于2012-12-07得票数 3
回答已采纳
我的html.erb文件中有以下代码： <%= form_tag({}, {:id => "id_search"}) do %> <%= submit_tag "Go" %></div>
当我在</
浏览 3提问于2012-09-27得票数 1
我知道如何在iOS 11中设置颜色和更改大标题的字体，但我很难找到大标题的默认字体和字体大小。我想在应用程序的其他地方复制字体。我已经尝试过以下方法，但它们没有给出字体或字体大小的结果。
浏览 11提问于2017-11-09得票数 13
回答已采纳
我正在努力学习马尔可顿和潘多克的基础知识，以加快我的学术写作。
我想问，当从Markdown (.md)文件转换为Word-2016 (.docx)文件时，是否可以定义字体系列和字体大小？如果在转换过程中可能的话，是否有人建议设置字体的适当方法？编辑:我遵循了在programminghistorian.org上的文章“可持续的作者”中提出
浏览 2提问于2020-05-30得票数 1
回答已采纳
我想访问Internet用户的字体设置，特别是字体系列，在用C#编写的浏览器帮助对象中。我已经查看了SHDocVw.WebBrowser和IHTMLDocument(到5)，但是我不知道我在寻找什么，也不知道丢失了什么。非常感谢!编辑：Richard问我为什么需要这个信息:如果系统上没有安装由IE7文档或CSS指定的字体系列，您可以
浏览 1提问于2009-03-18得票数 1
1回答
我做了一个简单的文本编辑器。使用javascript选择选项，我将字体-系列添加到内联样式，并更改字体-家族样式。之后，我需要ajax-将html保存在mysql数据库中。如果字体系列没有像Arial这样的重复引号，那么html通常保存在数据库中，但是如果它有重复的引号，那么在数据库中它不会保存到末尾，html被保存到字体系列<
浏览 9提问于2022-04-05得票数 -2
回答已采纳
我正在使用google font api，当我将字体系列行移动到封装的类和is中时，此代码可以工作，为什么我必须将字体系列行移动到.banner中，才能影响横幅类中的文本body{Text'; margin: 0px;
otherstuffhtml.erb：
&
浏览 1提问于2012-05-08得票数 2
回答已采纳
2回答
我在网页上使用的是css文本字体"Century，Arial，Courier，Sans-Serif“，但是每当我使用it字符时，它就不能在浏览器上正确显示(浏览器测试在Firefox、Explorer、HMTL：SPAN CSS：上述£文本显示为黑色菱形内的问号有人知道为什么</em
浏览 4提问于2014-08-18得票数 0
回答已采纳
我想要完成的事情：
从docx.enum.style导入WD_STYLE_TYPE)
我指定的字体只更改西方字体系列<e
浏览 0提问于2017-08-11得票数 2
回答已采纳
1回答
为什么选择在单击div时消失？
、、、、
我使用以下代码通过更改文本的字体来编辑可内容div中的文本。当点击一个div，这是一个样式化下拉菜单，选择消失在铬。它在火狐，歌剧，甚至在IE中工作得很好！
朗迪找不到任何选定的文本来处理。我在想为什么！
浏览 2提问于2013-03-10得票数 0
我有一个已知高度的div，单位为px。在这个div中，我有一些已知字体大小的px文本。现在我想使用padding将文本向下推，这样它就会接触到它下面的元素。但是，它不能通过推得太远来扩展div。从div-height中减去font-size会导致div扩展，即使我设置line-height:100%也是如此。是否有一个基于字体的
浏览 0提问于2013-02-01得票数 0
回答已采纳
1回答
我尝试了这里发布的每一段代码--它们都出现了错误(如AttributeError：'NoneType‘对象没有属性'find_next’)。开放源码软件版本可能会发生变化，因此结果会受到影响。下面是一个没有运行的例子： html = bs(page.content, "lxml")
text = html.get_text()<div style=“字
浏览 26提问于2022-04-12得票数 0
1回答
我的项目是clojureScript试剂的反应本机与博览会，我需要定制字体。我已经读过世博的文档关于如何定制字体，并试图遵循ClojureScript方式的指示。(世博会的自定义字体指令)
(defn字体-异步字体(js "Kanit“url))
在呈现之前调用加载异步函数。只为字体加载而持有a
浏览 2提问于2018-08-25得票数 0
2回答
表单字体在我的机器上看起来很好，当我尝试在另一台机器上时，它看起来更大。(这并不是因为分辨率不同，字体相对于其他图标更大。)}
我希望graphics.measurestring()在<
浏览 5提问于2009-12-22得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
