时间戳

首页 > 解决方案 > Unable to change the WordPress tinymce editor font

php - Unable to change the WordPress tinymce editor font

问题描述

I'm currently trying to change the WordPress tinymce editor font but it's not working.

First I've created a tinymce-custom-editor.css with the following content:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

* {
    font-family: "Open Sans", Arial, sans-serif !important;
}

After saving and uploading I've included it in my themes functions.php file this way:

/**
 * Add editor styles
 */
add_action( 'after_setup_theme', 'add_custom_editor_style' );
function add_custom_editor_style() {
    add_editor_style( get_stylesheet_directory_uri() . '/css/tinymce-custom-editor.css' );
}

I'm getting no error that the file can't be found so I expect that it's getting included successfully. When I delete the cache and reload the page, the font is still the wrong one:

font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;

enter image description here

It must looks like this here:

enter image description here

What I'm doing wrong here?

标签： phpcsswordpresstinymce

解决方案

首先，您应该确保css资源已加载（在页面源中查找）。如果已加载，则说明您走在正确的道路上。如果不是，请找出 WP 试图从哪里加载它并更正路径。

你的第二个问题是你的*选择器太笼统了（它会影响所有还没有 set 的东西font-family）而且太弱（它会被几乎任何其他选择器覆盖font-family到任何元素）。

因此，如果样式表加载正确，您所要做的就是应用font-family到尚未设置它的任何元素。

您需要检查您尝试设置样式的元素并找到当前应用该font-family属性的选择器的特殊性。一旦您的选择器比应用的选择器强，您font-family将应用（如果您的样式表稍后加载，则特异性可以相同并且您的值仍然适用）。

推荐阅读