jQuery ContextMenu 通过 swisnl 更改文本大小或字体答案

【问题标题】：jQuery ContextMenu by swisnl change text size or fontjQuery ContextMenu 通过 swisnl 更改文本大小或字体
【发布时间】：2017-01-06 22:18:15
【问题描述】：

我正在使用来自 swisnl 的 jQuery Context，但我找不到任何方法来更改 css 中的字体或字体大小。我只能将其更改为斜体/粗体，但不能更改为不同的字体或大小。

这些 css 更改只影响图标，而不影响文本本身。

关于如何更改文本大小/字体的任何想法？

【问题讨论】：

标签： jquery css fonts

【解决方案1】：

如果您尝试设置“项目类型文本”内容的样式，您可以使用以下事件来实现：

$(function(){
  $.contextMenu({
    selector: '.context-menu-one',
    items: {
      "textinput": {name: "Type something:", type: 'text', 
        events: {
          keydown: function(event) {
            $(this).css({"color":"magenta","font-size":"14px"});
            //$(this).parent().parent().css({"background":"green","font-size":"20px"});  //works too
          }
        }
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css">
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>


<button class="context-menu-one">Right click me</button>

【讨论】：

【解决方案2】：

您将在文档 > 网站 > css 文件夹的“theme.css”中找到字体样式。字体系列设置在正文中。您始终可以使用在上下文菜单加载后调用的自定义 CSS 覆盖它。您正在查看的课程将是“.context-menu-item span”。

在你的 CSS 中应该是：

 .context-menu-item{font-family:Times New Roman}/*Seemed to work using Chrome inspector*/

如果你想定位特定元素，文本被包裹在一个跨度中。

.context-menu-item span{font-family:Times New Roman !important}

【讨论】：