javascript - 您可以使用Javascript中的execCommand将ContentEditable文本的字体系列更改为自定义字体吗？

我有一些代码：

function SelectedValue() {
    var e = document.getElementById("dropdown2");
    var strUser = e.options[e.selectedIndex].value;
    if(strUser == "TypeWriter"){
       richTextField.document.execCommand('fontName',false,"'TypeWriter'");
    }else if(strUser == "Komika"){
       richTextField.document.execCommand('fontName',false,"\'Komika\'");
    }else{
       richTextField.document.execCommand('fontName',false,strUser);
    }
    document.getElementById("dropdown2").style.fontFamily=strUser;
}

此代码将文本更改为Arial或Times new roman之类的字体，并且效果很好。但是，当我尝试将其设置为自定义字体（如Typewriter）时，它不会起作用，它只是使用默认字体。我知道这些字体已正确安装，因为它们在设置其他HTML元素（如和）的字体系列时会起作用。是否可以使用execCommand将文本的字体系列更改为javascript中的自定义字体？

这是所有相关代码：

的CSS

@font-face {
    font-family: 'Komika';
    src: url('KOMTITA_.eot'); /* IE9 Compat Modes */
    src: url('KOMTITA_.eot?#iefix') format('embedded-opentype'),
    url('KOMTITA_.woff2') format('woff2'),
    url('KomikaTitle-Axis.woff') format('woff'),
    url('KomikaTitle-Axis.ttf')  format('truetype'),
    url('KomikaTitle-Axis.svg#svgFontName') format('svg');
}
@font-face {
    font-family: 'TypeWriter';
    src: url('1942.eot'); /* IE9 Compat Modes */
    src: url('1942.eot?#iefix') format('embedded-opentype'),
    url('1942.woff2') format('woff2'),
    url('1942report.woff') format('woff'),
    url('1942report.ttf')  format('truetype'),
    url('1942report.svg#svgFontName') format('svg');
}

的HTML

 <center><div id="WYSIWYGBTNS">
                <select onchange="SelectedValue()" name="fonts" id="dropdown2" class="dropdown_class" style="margin-top:0px;display:inline-block;">
                  <option id="dropdown_item" value="Lucida Console"style="font-family:'Lucida Console';">Lucida Console</option>
                  <option id="dropdown_item" value="TypeWriter" style="font-family:'TypeWriter';">TypeWriter</option>
                  <option id="dropdown_item" value="arial"style="font-family:'arial';">Arial</option>
                  <option id="dropdown_item" value="Impact"style="font-family:'Impact';">Impact</option>
                  <option id="dropdown_item" value="Times New Roman"style="font-family:'Times New Roman';">Times New Roman</option>
                  <option id="dropdown_item" value="Courier New"style="font-family:'Courier New';">Courier New</option>
                  <option id="dropdown_item" value="Webdings"style="font-family:'Webdings';">Webdings</option>
                  <option id="dropdown_item" value="Century Gothic"style="font-family:'Century Gothic';">Century Gothic</option>
                  <option id="dropdown_item" value="Georgia"style="font-family:'Georgia';">Georgia </option>
                  <option id="dropdown_item" value="Komika"style="font-family:'Komika';">Komika </option>

                </select>
</div></center>

          <center><iframe name="richTextField" id="richTextField"  style=""><div style=""><?php echo $text;?></div></iframe></center>

Java脚本

function SelectedValue() {
    var e = document.getElementById("dropdown2");
    var strUser = e.options[e.selectedIndex].value;
    if(strUser == "TypeWriter"){
    richTextField.document.execCommand('fontName',false,"\'TypeWriter\'");
    }else if(strUser == "Komika"){
    richTextField.document.execCommand('fontName',false,"\"Komika\"");
    }else{
    richTextField.document.execCommand('fontName',false,strUser);
    }
    document.getElementById("dropdown2").style.fontFamily=strUser;
}

最佳答案

您需要将自定义字体放在iframe中才能正常工作。