Using varying fonts in Android web design can create a visually

Living in South Korea, my English isn't the best

I hope you can understand despite my poor language skills.

My issue is related to this:

Unlike Android 6.0 or later versions, fonts vary from version to version.

This involves CSS styling

    .box {
        width:100px;
    }

    p {
        display: block;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient:vertical;
        word-wrap: break-word;
    }

    .font1 {
        font-family: helvetica Neue, sans-serif;
    }

    .font2 {
        font-family: helvetica, sans-serif;
    }

This is the code snippet I'm working with:

<div id="test">
    <div class="box">
        <p class="font1">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
    </div>

    <div class="box">
        <p class="font2">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
    </div>
</div>

Take a look at the image here

I know that Android doesn't have the Helvetica font and uses 'Roboto' as default in version 6.0.

Q1. Why is there 'sans' instead of 'sans-serif' in font-family: helvetica Neue,sans-serif?
(Image on top)

Q2. Is that font Droid?

Q3. Is using font-family: sans-serif; incorrect? By just writing this, the font appears as serif style, but I require sans-serif. Help!

Apologies for my limited English, but I really need your assistance, as I believe Korean individuals might not be aware of this issue.

Answer №1

Query 1: Why is there a 'sans,' not a font, like 'sans-serif' in the font-family declaration? (refer to picture at the top)

Sans-Serif and Serif are two distinct font categories. For example, Times New Roman is a serif font while Arial is a sans-serif font. I hope this addresses your question.

Query 2: Is that font Droid?

The Droid fonts, created by Ascender Corporation, include variations such as Droid Sans and Droid Serif. These fonts were specifically designed for use on small screens.

Query 3: Using font-familiy : sans-serif; results in serif font style. How can I achieve a sans-serif font?

You may have misspelled "family" as "familiy". You could alternatively refer to this example: jsfiddle.net/dsymbwwg

To improve communication in English, consider using Google Translate to convert your Korean text into English before sharing it with us. This can help us better understand your situation. Hope this information proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effective model synchronization in Angular UI when filtering applied between two lists

Currently, I am utilizing Sortable in AngularUI to handle multiple sortable lists. I have successfully set it up so that I can easily move items between the lists and update the respective models accordingly. However, when adding a query filter, I encounte ...

Arrange flexbox containers side by side in a horizontal row

I am attempting to create two flexbox containers one after the other, utilizing a combination of classes to achieve this layout. While the flexbox is created successfully, I encounter an issue where the lower container goes below the upper one when scrolli ...

Displaying elements upon clicking using Javascript

I am in the process of achieving this task without Jquery. My goal is to display a div when triggering an event. Currently, I have the following code to hide the element: document.getElementById('element').style.display = 'none'; Her ...

Angular.js does not trigger validation for input[type='date'] if only a part of the date is entered (such as just the day)

There is an input[type='date'] with no additional validation rules. The issue arises when only a portion of the date is entered (for example, just the day and month). In this case, if you enter '01/02/YYYY', it will be recognized as an ...

Odd behavior of dropdown list on Internet Explorer 8

Thank you for taking the time to review this. I have a dynamic dropdown list that changes its content based on a specific value (for example, "51") inputted into the JavaScript code on each page. Different pages display different lists depending on this va ...

What is the best way to retrieve Select button values from a MySQL database and pass them to a different page?

I've been trying to code it, but I keep running into issues. The main objective was to allow the user to select a value from a MySQLi database and then send that value to another page. I know people recommend using AJAX for this purpose, so I attempte ...

Unable to stop a service from a BroadcastReceiver

My service begins by sending data through a socket to the server. In the onCreate() method of the service, I also set an alarm using the setExact() method. The issue arises when the onReceive() function within the BroadcastReceiver is triggered. Although I ...

Tips for verifying the text input in an EditText within an Android application development process

As a beginner in Android app development, I have encountered an issue with my code in the .java file. My goal is to display a Toast message if either EditText field 1 or 2 is empty, otherwise, show the result using result.setText(). However, when testing ...

Can the Bootstrap grid be arranged vertically?

I'm finding it difficult to work on a project with Bootstrap's horizontal grid system. What I want to achieve is to have my page divided into 4 sections, with the left side blocks having equal height and the right side blocks having varying heigh ...

Start up an app following a market update

Is there a way for my app to automatically launch after it has been updated from the market (play store)? When I say "wake up," I am referring to executing Application.onCreate(). ...

The jQuery remove function will only take effect on the second click following an AJAX request

I'm facing an issue with my jQuery code where two divs contain lists of links, triggering AJAX calls to append JSON data to a separate div. Upon clicking a link, the corresponding link div should hide. There's also a third div with the class "pan ...

Customizing the search dialog in JQGrid to adjust the width of the input fields

Can the width of the text box in Jqgrid default search dialog be increased? Check out the image: Updated Code for the search functionality: jQuery("#subscriptions").jqGrid( 'navGrid', '#pager', { del: false, add: false, e ...

I am concerned about the security of my games as they can be easily hacked through right-click inspect. What measures can

As a newcomer to game development, I am creating web games using JS, HTML, and CSS. However, I have encountered an issue with preventing right-click inspect hacking, which has led to people hacking my games through this method. I am wondering, how can I s ...

Saving Data using SharedPreferences

I've been attempting to save username and password values using SharedPreferences in order to populate EditText fields with those values. However, I am running into an issue where the fields are not being populated despite my efforts. Below is my log ...

In order to have JavaScript showcase a random word from a list when a button is clicked and then display it in a heading 3, follow these steps:

How can I create a JavaScript function that displays a random word from a list when a button is clicked and prints it in a heading 3? I would appreciate a quick response. //Start of Js code let display = document.getElementById("motivato"); console.log(di ...

What is the process for creating distinct templates for various devices such as mobile phones, desktops, and tablets using Angular?

I am working on an Angular 9 application. Currently, I have some mockups but the template appears differently on mobile compared to desktop. However, the data fetched from API calls is mostly similar for both platforms, with slight variations possible be ...

The UI gets all wonky when using ThemeRoller for jQuery

Currently, I am encountering an issue where I want to utilize ThemeRoller for implementing custom themes on my views. However, when I apply these themes, the interface ends up looking distorted, as shown in the images below: Before using ThemeRoller: Aft ...

Erase blob_over from the Wordpress menu hover effect

I've created a unique style for the Donate button on this website, but I'm struggling to remove the hover effect. Any suggestions on where to start? Website URL: This is my Custom Class CSS: .donate { background:#4A1383; padding:0px 10px 0px 1 ...

Utilize cURL to retrieve a file from a webpage designed for automatic downloads

I am currently working on a script to automatically download and install the most up-to-date versions of specific applications. Is there a simple way to download the latest program from a website? For instance, if we look at the Firefox download page: On ...

My app's download count on Google Play is inaccurate and needs to be corrected

Three weeks ago, I released an Android app on Google Play. This app has its own database running on a server, allowing me to track the number of downloads by generating a unique number for each device. However, Google Play is currently showing a download ...