如何将 oswald google 字体作为字体系列下拉列表中的列表应用到 tinymce 编辑器？答案

【问题标题】：How to apply oswald google fonts to tinymce editor as a list in font family dropdown?如何将 oswald google 字体作为字体系列下拉列表中的列表应用到 tinymce 编辑器？
【发布时间】：2021-01-29 23:26:08
【问题描述】：

How to apply Oswald google fonts to TinyMCE editor as a list in the font-family dropdown in TinyMCE editor?
link of TinyMCE editor is this https://www.tiny.cloud/blog/tinymce-custom-font-family/
Also, you can find my code below, you can directly copy that code and run on your system.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/1p8sxvjggr9uwgjmg51zcebcj0a305xtr2ojec1a01ld7w2i/tinymce/5/tinymce.min.js"
        referrerpolicy="origin"></script>
    <script src="https://raw.githubusercontent.com/blowsie/Pure-JavaScript-HTML5-Parser/master/htmlparser.js"></script>
    <script src=" https://cdn.jsdelivr.net/npm/html2json-parser@0.0.1/index.min.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap"
        rel="stylesheet">
    <script>
    tinymce.init({
            selector: '.viktest',
            menubar: false,
            inline: true,
            plugins: 'code textcolor colorpicker emoticons lists',  // note the comma at the end of the line!
            toolbar: 'code fontsizeselect fontselect redo  bold italic  bullist numlist  forecolor backcolor emoticons ',
            powerpaste_word_import: 'clean',
            powerpaste_html_import: 'clean',
            placeholder: "Title goes here",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt",
            "content_style": "@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap'); body { font-family: Oswald-ExtraLight;}",

            "font_formats": "Oswald ExtraLight=oswald-extraLight;Oswald Light=oswald-light;Arial Black=arial black,avant garde; Courier New=courier new,courier; Lato Black=lato; Roboto=roboto;",
        });
    </script>
</head>

<body>
    <div class="demo-inline">
        <div class="container">
            <br>
            <br>
            <div class="viktest"></div>
        </div>
       
    </div>
</body>

</html>

我尝试了各种方法，但无法解决此问题。我也检查了 TinyMCE 编辑器文档，但没有成功。我希望字体系列列表中提供以下字体。

Oswald-Bold 奥斯瓦尔德-莱特奥斯瓦尔德-中 Oswald-常规 Oswald-SemiBold

【问题讨论】：

标签： javascript tinymce google-fonts

【解决方案1】：

您在加载字体方面处于正确的轨道上，但在如何将其应用到内容方面却不是这样。我创建了一个 TinyMCE Fiddle 来展示如何使用它：

https://fiddle.tiny.cloud/C3haab/1

您的代码尝试通过以下方式将正文字体设置为 Oswald 的“轻”变体：

body { 
  font-family: Oswald-ExtraLight;
}

...但这不是您导入的任何字体的名称。您导入了一个名为 Oswald 的东西。在 Fiddle 中，您会看到，如果您将 font-family 更改为 Oswald，至少可以让您使用您导入的字体：

body {  
  font-family: Oswald;
}

第二个问题是如何使用字体的各种粗细。这是通过font-weight 使用CSS 处理的。在 Fiddle 中，您将看到我使用 style_formats 提供了一些不同的类，您可以使用它们将字体权重应用于 TinyMCE 中的内容（这些类在 content_style 中定义）：

style_formats: [
    {title: 'Extra Light Text (class)', inline: 'span', classes: 'extralight'},
    {title: 'Light Text (class)', inline: 'span', classes: 'light'},
    {title: 'Medium Text (class)', inline: 'span', classes: 'medium'},
],

Fiddle 用一些预先添加的文本显示了这个运行，这些文本显示了一些不同的字体权重。

【讨论】：

谢谢，但是您在哪里找到此文档？