<!DOCTYPE html> <html class="reftest-wait"> <meta charset="utf-8"> <style> @font-face { font-family: test; src: url(../fonts/sil/CharisSIL-R.ttf); } #test { font: 100px test, serif; -webkit-text-fill-color: transparent; -webkit-text-stroke-color: blue; -webkit-text-stroke-width: 2px; } ::selection { background: transparent; color: blue; } </style> <script> function doTest() { let div = document.getElementById("test"); let range = document.createRange(); range.setStart(div.firstChild, 2); range.setEnd(div.firstChild, 3); window.getSelection().addRange(range); document.documentElement.removeAttribute("class"); } </script> <body onload="doTest()"> <div id="test">office</div>