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

Question

我有一些代码：

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等字体，并且工作正常。 但是当我尝试将它设置为像打字机这样的自定义字体时，dosnt工作它只是转到默认字体。 我知道字体已正确安装，因为它们在设置其他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>

使用Javascript

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;
}

Answer 1

您需要将自定义font-face放在iframe中才能正常工作。