Jump to content

Simoni

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by Simoni

    font are not display on android

    in HTML/XHTML

    Posted

    hi forom piople 

    i have a big problem that i dont succsed to solved for long time 

    Setup description :
    i used with the NodeMcu ESP8266 as a web server

    Problem :  font are not display on android but can be shwon on iPhone and regular web brouser 

    all my knowlge on HTML is 80% from this site 

    please find below the code 
     

     
    const char homePage[] PROGMEM = R"=====(                            
                                
                                <html>
                                <head>
                                <title> Engineering Project </title>
                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                  <script src="https://kit.fontawesome.com/a076d05399.js"></script>

     <style>

    body{
      margin-top: 10px;
      font-family: Times New Roman;
      background-color:#333333;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }

      
    h1{
     font-size: 3.5em; /* 40px/16=2.5em */
     margin: 0px auto 10px;

    }
      

    .buttonSetup {
     display: block;
     width: 130px;
     background-color: 2c3e50 ;
     border:4px solid #DAA520;
     color: #DAA520 ;
    padding: 30px 30px;
    text-decoration: none;
    font-size: 50px;
    margin: 0px auto 50px;
    cursor: pointer;
    border-radius: 10px;

    }

    .Cut {
     display: block;
     width: 130px;
     background-color: 2c3e50 ;
     border:4px solid #DAA520;
     color: #DAA520 ;
    padding: 30px 30px;
    text-decoration: none;
    font-size: 50px;
    margin: 0px auto 1px;
    cursor: pointer;
    border-radius: 10px;

    }
    .header_cut {
      background-color: #333333;
      border-width: 4px;
      border-color:  yellow;
      color: #f2f2f2;
      padding: 1px 1px;
      display: inline; 
      }

    .button {
     display: block;
     width: 180px;
     background-color: 333333 ;
     border:4px solid #DAA520;
     color: #DAA520 ;
    padding: 13px 30px;
    text-decoration: none;
    font-size: 50px;
    margin: 0px auto 5px;
    cursor: pointer;
    border-radius: 4px;
    }


    .header_button {
      background-color: ;
      border-width: 7px;
      border-color:  yellow;
      color: #f2f2f2;
      padding: 15px 10px;
      }
      

    .Cut {
      background-color: #333333;
      color: white;
      border-width: 7px;
      border-color:  #cccccc;
      }
      
      .buttonSetup {
      background-color: #333333;
      color: white;
      border-width: 7px;
      border-color:  #cccccc;
      }
      

    .button-off:active {background-color: #2c3e50;}

    .my_button:active {background-color: white;}


    </style>
                                </head>
                                <body>

                                <center>
                              
                                <h1 class="header_button" > &nbsp; Engineering Project &nbsp;  </h1>
                  
                                <a class="buttonSetup my_button" href="/calibration"> <i class="fas fa-users-cog"></i>
                                <i class="fas fa-cog fa-spin"></i></a>
                                <a class="Cut my_button" href="/cut_start" > <i class="fas fa-fan fa-spin"></i> </a>
                                <a class="header_cut my_button" href="/cut_start" > Start to Cat </a>

                                </center>

                               
                                </body> </html>

     

     

×
×
  • Create New...