CSS font-size

CSS font text 字形 字串 字樣 文字

<style>.fontM {background-color:steelblue;width:100%;text-align: center;color:white} #Sizebutton td {vertical-align:top;font-size:22px;font-style:none;font-weight:none;padding: 5px 5px;} .radioLABEL { display: block; position: relative; padding-left: 22px; margin-bottom: 5px; cursor: pointer; font-size: 18px; } .radioLABEL input { position: absolute; opacity: 0; cursor: pointer; } .radioSPAN { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: silver ; border-radius: 50%; } .radioLABEL:hover input ~ .radioSPAN { background-color: gray; } .radioLABEL input:checked ~ .radioSPAN { background-color: #2196F3; } .radioSPAN:after { content: ""; position: absolute; display: none; } .radioLABEL input:checked ~ .radioSPAN:after { display: block; } .radioLABEL .radioSPAN:after { top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: white; } .boxlabel{ display: block; position: relative; padding-left: 22px; margin-bottom: 12px; cursor: pointer; font-size: 18px; } .boxlabel input { position: absolute; opacity: 0; cursor: pointer; } .boxapan { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: silver; } .boxlabel:hover input ~ .boxapan { background-color: gray;} .boxlabel input:checked ~ .boxapan { background-color: #2196F3;} .boxapan:after { content: ""; position: absolute; display: none; } .boxlabel input:checked ~ .boxapan:after { display: block; } .boxlabel .boxapan:after { left: 6px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} </style> <div id="Sizebutton"><table border="1" rules="all" width="100%"><tr height="30%"><td width="200px" rowspan="3" ><!-------------------------111------------------------------------><div class="fontM">font-size</div> <label class="radioLABEL">20px <input type="radio" name="radio" value="20px" checked="checked" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" >30px <input type="radio" name="radio" value="30px" onclick="fontSize(this)" > <span class="radioSPAN"></span> </label> <label class="radioLABEL">xx-small <input type="radio" name="radio" value="xx-small" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">x-small <input type="radio" name="radio" value="x-small" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">small <input type="radio" name="radio" value="small" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">medium <input type="radio" name="radio" value="medium" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">large <input type="radio" name="radio" value="large" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">x-large <input type="radio" name="radio" value="x-large" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">xx-large <input type="radio" name="radio" value="xx-large" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">smaller <input type="radio" name="radio" value="smaller" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">larger <input type="radio" name="radio" value="larger" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">50% <input type="radio" name="radio" value="50%" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">200% <input type="radio" name="radio" value="200%" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label><label class="radioLABEL">1em <input type="radio" name="radio" value="1em" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label><label class="radioLABEL">0.5em <input type="radio" name="radio" value="0.5em" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">inherit <input type="radio" name="radio" value="inherit" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label><!------------------------------222-------------------------------------------><div class="fontM">textDecoration</div> <label class="radioLABEL">none <input type="radio" name="radioline" value="none" checked="checked" onclick="fontLine(this) checked="checked" /> <span class="radioSPAN"></span> </label> <label class="radioLABEL">overline <input type="radio" name="radioline" value="overline" onclick="textDecoration(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">underline <input type="radio" name="radioline" value="underline" onclick="textDecoration(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">line-through <input type="radio" name="radioline" value="line-through" onclick="textDecoration(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">inherit <input type="radio" name="radioline" value="inherit" onclick="textDecoration(this)"> <span class="radioSPAN"></span> </label><!--------------------------------333-----------------------------------------><div class="fontM">Line Height</div> <label class="radioLABEL">inherit <input type="radio" name="lineHeight" value="inherit" checked="checked" onclick="lineHeight(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">20px <input type="radio" name="lineHeight" value="20px" onclick="lineHeight(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">40px <input type="radio" name="lineHeight" value="40px" onclick="lineHeight(this)"> <span class="radioSPAN"></span> </label><!-------------------------444-------555--------------------------------------> <div class="fontM">italic / bold</div> <label class="boxlabel">italic <input type="checkbox" value="italic" onclick="fontItalic(this)"> <span class="boxapan"></span> </label> <label class="boxlabel">bold <input type="checkbox" value="bold" onclick="fontBold(this)"> <span class="boxapan"></span> </label></td><!-----------------------------------------------><!-------------------6666----------------------------><td width="200px" rowspan="3"><div class="fontM">text-transform</div> <label class="radioLABEL">inherit <input type="radio" name="radioCASE" value="inherit" checked="checked" onclick="textTransform(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">capitalize <input type="radio" name="radioCASE" value="capitalize" onclick="textTransform(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">lowercase <input type="radio" name="radioCASE" value="lowercase" onclick="textTransform(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">capitalize <input type="radio" name="radioCASE" value="capitalize" onclick="textTransform(this)"> <span class="radioSPAN"></span> </label><!-----------------------777--------------------------------------><div class="fontM">wordSpacing</div> <label class="radioLABEL">normal <input type="radio" name="fontword" value="normal" checked="checked" onclick="wordSpacing(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">20px <input type="radio" name="fontword" value="20px" onclick="wordSpacing(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">30px <input type="radio" name="fontword" value="30px" onclick="wordSpacing(this)"> <span class="radioSPAN"></span> </label><!----------------------------------------------------------------><div class="fontM">Color</div> <label class="radioLABEL" style="background-color:black;color:white" >black <input type="radio" name="fontCOLOR" value="black" checked="checked" onclick="fontCOLOR(this)" > <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:blue;color:white" >blue <input type="radio" name="fontCOLOR" value="blue" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:purple;color:white" >purple <input type="radio" name="fontCOLOR" value="purple" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:red;color:white" >red <input type="radio" name="fontCOLOR" value="red" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:fuchsia;color:white" >fuchsia <input type="radio" name="fontCOLOR" value="fuchsia" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:maroon;color:white" >maroon <input type="radio" name="fontCOLOR" value="maroon" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:steelblue;color:white" >steelblue <input type="radio" name="fontCOLOR" value="steelblue" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:orange;color:white" >orange <input type="radio" name="fontCOLOR" value="orange" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label><!--------------------------------------------------------------------------------><div class="fontM">fontFamily</div> <label class="radioLABEL" style="font-family:serif" >serif <input type="radio" name="fontFamily " value="serif" checked="checked" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Calibri" >Calibri <input type="radio" name="fontFamily " value="Calibri" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Courier" >Courier <input type="radio" name="fontFamily " value="Courier" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Fantasy" >Fantasy <input type="radio" name="fontFamily " value="Fantasy" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Comic Sans" >Comic Sans <input type="radio" name="fontFamily " value="'Comic Sans MS', 'comic sans'" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Cursive" >Cursive <input type="radio" name="fontFamily " value="Cursive" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:標楷體,DFKai-sb,BiauKai,'AR PL UKai TW'" >標楷體字型 <input type="radio" name="fontFamily " value="標楷體,DFKai-sb,BiauKai,'AR PL UKai TW'" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:新細明體,'AR PL UMing TW'" >新細明體字型 <input type="radio" name="fontFamily " value="新細明體,'AR PL UMing TW'" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Microsoft JhengHei" >微軟正黑體 <input type="radio" name="fontFamily " value="Microsoft JhengHei" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label></td><td colspan="2" style="text-align: center;vertical-align:miDdomle;height:300px;text-align: center; vertical-align:middle"><div id="demoDIV" style="font-size:20px;text-decoration:inherit;color:black;font-weight:inherit; font-style:inherit;line-height:inherit;text-transform: none;word-spacing: normal;font-family:serif">123 456 790<br>ABCD EFGH IJKL MNOP QRST UVWXYZ<br>abcd efgh ijkl mnop qrst uvwxyz<br>中國 香港 CSS font 字形 字串 字樣 文字 </div></tr><tr><td><div id="Dcss1">1</div><div id="Dcss2">2</div><div id="Dcss3">3</div><div id="Dcss4">4</div><div id="Dcss5">5</div><div id="Dcss6">6</div><div id="Dcss7">7</div><div id="Dcss8">8</div><div id="Dcss9">9</div></td></tr></tr><tr><td>var x = document.getElementById(id); <div id="Ddom1">1</div><div id="Ddom2">2</div><div id="Ddom3">3</div><div id="Ddom4">4</div><div id="Ddom5">5</div><div id="Ddom6">6</div><div id="Ddom7">7</div><div id="Ddom8">8</div><div id="Ddom9">9</div> </td></tr></tbody></table></div> <script>var fontX = document.getElementById("demoDIV"); function fontSize(x){ fontX.style.fontSize = x.value; changeCSS() ; Dcss1.style.fontWeight="bold" Dcss1.style.color="blue"; Ddom1.style.fontWeight="bold" Ddom1.style.color="blue";} function textDecoration(x){ fontX.style.textDecoration = x.value; changeCSS() ; Dcss2.style.fontWeight="bold" Dcss2.style.color="blue"; Ddom2.style.fontWeight="bold" Ddom2.style.color="blue";} function lineHeight(x){ fontX.style.lineHeight = x.value; changeCSS() ; Dcss3.style.fontWeight="bold" Dcss3.style.color="blue"; Ddom3.style.fontWeight="bold" Ddom3.style.color="blue";} fontItalic function fontItalic(x){ if(x.checked ){fontX.style.fontStyle = x.value; } else {fontX.style.fontStyle = "inherit";} changeCSS(); Dcss4.style.fontWeight="bold" Dcss4.style.color="blue"; Ddom4.style.fontWeight="bold" Ddom4.style.color="blue"; } function fontBold(x){ if(x.checked ){fontX.style.fontWeight = x.value;} else {fontX.style.fontWeight = "inherit";} changeCSS(); Dcss5.style.fontWeight="bold" Dcss5.style.color="blue"; Ddom5.style.fontWeight="bold" Ddom5.style.color="blue"; } function textTransform(x){ fontX.style.textTransform = x.value; changeCSS() ; Dcss6.style.fontWeight="bold" Dcss6.style.color="blue"; Ddom6.style.fontWeight="bold" Ddom6.style.color="blue";} function wordSpacing(x){ fontX.style.wordSpacing = x.value; changeCSS() ; Dcss7.style.fontWeight="bold" Dcss7.style.color="blue"; Ddom7.style.fontWeight="bold" Ddom7.style.color="blue";} function fontCOLOR(x){ fontX.style.color = x.value; changeCSS() ; Dcss8.style.fontWeight="bold" Dcss8.style.color="blue"; Ddom8.style.fontWeight="bold" Ddom8.style.color="blue";} function fontFamily(x){ fontX.style.fontFamily = x.value; changeCSS() ; Dcss9.style.fontWeight="bold" Dcss9.style.color="blue"; Ddom9.style.fontWeight="bold" Ddom9.style.color="blue";} /* ------------------------------------------- */ function changeCSS(){ var x = document.getElementById("demoDIV") ; Dcss1.style.fontWeight="inherit" Dcss2.style.fontWeight="inherit" Dcss3.style.fontWeight="inherit" Dcss4.style.fontWeight="inherit" Dcss5.style.fontWeight="inherit" Dcss6.style.fontWeight="inherit" Dcss7.style.fontWeight="inherit" Dcss8.style.fontWeight="inherit" Dcss9.style.fontWeight="inherit" Dcss1.style.color="black"; Dcss2.style.color="black"; Dcss3.style.color="black"; Dcss4.style.color="black"; Dcss5.style.color="black"; Dcss6.style.color="black"; Dcss7.style.color="black"; Dcss8.style.color="black"; Dcss9.style.color="black"; Ddom1.style.fontWeight="inherit" Ddom2.style.fontWeight="inherit" Ddom3.style.fontWeight="inherit" Ddom4.style.fontWeight="inherit" Ddom5.style.fontWeight="inherit" Ddom6.style.fontWeight="inherit" Ddom7.style.fontWeight="inherit" Ddom8.style.fontWeight="inherit" Ddom9.style.fontWeight="inherit" Ddom1.style.color="black"; Ddom2.style.color="black"; Ddom3.style.color="black"; Ddom4.style.color="black"; Ddom5.style.color="black"; Ddom6.style.color="black"; Ddom7.style.color="black"; Ddom8.style.color="black"; Ddom9.style.color="black"; Dcss1.innerHTML="div { font-size: " + x.style.fontSize + " ;" ; Dcss2.innerHTML=" text-decoration : " + x.style.textDecoration+ " ;" ; Dcss3.innerHTML=" line-height : " + x.style.lineHeight + " ;"; Dcss4.innerHTML=" font-style : " + x.style.fontStyle + " ;" ; Dcss5.innerHTML=" font-weight : " + x.style.fontWeight + " ;" ; Dcss6.innerHTML=" text-transform : " + x.style.textTransform + " ; " ; Dcss7.innerHTML=" wordSpacing : " + x.style.wordSpacing + " ; " ; Dcss8.innerHTML=" color : " + x.style.color+ " ;" ; Dcss9.innerHTML=" font-family: " + x.style.fontFamily + " ; }" ; Ddom1.innerHTML='x.style.fontSize = "' + x.style.fontSize + '"' ; Ddom2.innerHTML='x.style.textDecoration = "' + x.style.textDecoration + '"'; Ddom3.innerHTML='x.style.fontStyle = "' + x.style.lineHeight + '"'; Ddom4.innerHTML='x.style.fontStyle = "' + x.style.fontStyle + '"'; Ddom5.innerHTML='x.style.fontWeight = "' + x.style.fontWeight + '"'; Ddom6.innerHTML='x.style.textTransform = "' + x.style.textTransform + '"'; Ddom7.innerHTML='x.style.word-spacing= "' + x.style.wordSpacing + '"'; Ddom8.innerHTML='x.style.color= "' + x.style.color + '"'; Ddom9.innerHTML='x.style.fontFamily = "' + x.style.fontFamily + '"'; } changeCSS(); </script><!------------------------------------OUT---------------------------->

00